ホームページ > ウェブフロントエンド > jsチュートリアル > 関数式と関数宣言を使用するタイミング

関数式と関数宣言を使用するタイミング

Jennifer Aniston
リリース: 2025-02-09 08:51:11
オリジナル
715 人が閲覧しました

When to Use a Function Expression vs. Function Declaration

javaScript関数定義方法:関数式と関数宣言。この記事では、関数式を使用するタイミング、機能宣言をいつ使用するかを説明し、2つの違いを説明します。

頻度宣言は長い間広く使用されてきましたが、関数式は徐々に支配されています。多くの開発者は、最終的に間違った選択につながるものをいつ使用するか確信が持てません。

関数式と関数宣言にはいくつかの重要な違いがあります。これらの違いと、コードで関数式と関数宣言をいつ使用するかを詳しく見てみましょう。

function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

キーポイント

  • 関数式と関数宣言は、JavaScriptに関数を作成する2つの方法です。関数宣言の名前が付けられており、変数プロモーションにより、定義の前に呼び出されますが、変数に割り当てられますが、呼び出す前に定義する必要があります。
  • 関数式は、関数宣言よりも柔軟です。それらは定義の直後に使用でき、別の関数のパラメーターとして使用され、匿名であることができます。一方、関数宣言は、特に長い関数に対してより読みやすく、さまざまなプロモーションのために定義の前に呼び出すことができます。
  • 関数式または関数宣言の選択は、コードの特定の要件に依存します。関数宣言は通常、再帰関数が必要な場合、または関数を定義する前に関数を呼び出す必要がある場合に使用されます。関数式は、両方の操作が不要な場合にクリーナーコードを作成するのに最適です。
  • 関数式を使用して、クロージャーを作成し、他の関数への引数としてそれらを渡し、関数式(IIFE)をすぐに呼び出すことができます。これにより、開発者ツールボックスに汎用性が高く強力なツールになります。

関数宣言とは何ですか?

関数が作成され、名前が付けられたときに、

関数宣言が実行されます。 functionキーワードを書いた後、関数名に従って、関数の名前を宣言します。たとえば、

function myFunction() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ご覧のとおり、関数を作成するときに関数名(myFunction)を宣言します。これは、関数を定義する前に呼び出すことができることを意味します。

これは関数宣言の例です:

function add(a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数式とは何ですか?

関数を作成して変数に割り当てるときに、

関数式が実行されます。関数は匿名であるため、名前がありません。たとえば、

let myFunction = function() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ご覧のとおり、関数はmyFunction変数に割り当てられます。これは、関数を呼び出す前に定義する必要があることを意味します。

これは関数式の例です:

let add = function (a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数式と宣言の違い

関数式と関数宣言にはいくつかの重要な違いがあります:

  • 関数宣言は促進されますが、関数式はそうではありません。これは、関数宣言を定義する前にそれを呼び出すことができることを意味しますが、関数式でこれを行うことはできません。
  • 関数式を使用して、関数を定義した直後に使用できます。関数宣言を使用すると、スクリプト全体が解析されるまで待つ必要があります。
  • 関数式は別の関数のパラメーターとして使用できますが、関数宣言は実行できません。
  • 関数式は匿名である可能性がありますが、関数宣言はできません。

関数式の範囲を理解する:javaScriptが違いを強化する

letステートメントと同様に、関数宣言は他のコードの上部に宣伝されます。

関数式は促進されません。これにより、定義されている範囲から取られたローカル変数のコピーを保持できます。

通常、関数宣言と関数式を同じ意味で使用できます。ただし、関数式が、一時的な関数名を必要とせずに、理解しやすいコードにつながる場合があります。

式と宣言を選択する方法

では、関数式をいつ使用する必要があり、いつ機能宣言を使用する必要がありますか?

答えはあなたのニーズに依存します。より柔軟な関数または宣伝されない関数が必要な場合、関数式が最良の選択です。より読みやすく理解しやすい機能が必要な場合は、関数宣言を使用します。

ご覧のとおり、2つの構文は似ています。最も明らかな違いは、関数式が匿名であり、関数宣言が有名であることです。

今日、関数式ができないことをする必要がある場合、機能宣言が通常使用されます。関数宣言でのみ実行できる操作を実行する必要がない場合は、通常、関数式を使用する方が良いです。

再帰関数を作成する必要がある場合、またはそれを定義する前に関数を呼び出す必要がある場合は、関数宣言を使用します。経験則として、両方を実行する必要がない場合は、関数式を使用してクリーナーコードを書き込みます。

関数宣言の利点

関数宣言を使用することにはいくつかの重要な利点があります。

  • コードの読み取りを容易にすることができます。長い関数がある場合、名前を付けることで、それが何をしているのかを追跡するのに役立ちます。
  • 関数宣言は宣伝されています。つまり、コードで定義される前に利用可能です。これは、関数を定義する前に使用する必要がある場合に役立ちます。

関数式の利点

関数式にはいくつかの利点があります。

  • 機能宣言よりも柔軟性があります。関数式を作成して、異なる変数に割り当てることができます。これは、異なる場所で同じ関数を使用する必要がある場合に役立ちます。
  • 関数式は宣伝されていないため、コードで定義する前に使用することはできません。これは、関数を定義した後にのみ使用したい場合に役立ちます。

いつ関数宣言と関数式

を選択する必要がありますか

ほとんどの場合、関数を定義する方法がニーズに最適な方法を簡単に判断するのは簡単です。これらのガイドラインは、ほとんどの場合、迅速に決定を下すのに役立ちます。

以下の場合に関数宣言を使用してください:

  • より読みやすく理解できる関数(長い関数、またはさまざまな場所で使用する必要がある関数など)
  • が必要です。
  • 匿名関数はあなたのニーズには適していません
  • 再帰関数を作成する必要があります
  • 関数を定義する前に呼び出す必要があります

以下の場合に関数式を使用します。

  • もっと柔軟な関数が必要です
  • 宣伝されない関数
  • が必要です
  • この関数は、定義されている場合にのみ使用する必要があります
  • この関数は匿名であるか、将来的には名前が必要ありません
  • 関数式をすぐに呼び出すなどの手法を使用して、関数の実行時間を制御する必要があります(iife)
  • あなたは関数を別の関数への引数として渡したい

つまり、多くの場合、関数表現の柔軟性が強力な利点になります。

機能式を解き放つ可能性:javaScriptが違いを強化する

機能宣言よりも式を機能させるには多くの方法があります。

  • 閉じる
  • 他の関数の引数
  • function式をすぐに呼び出します(iife)

関数式

を使用して閉鎖を作成します パラメーターを実行する前に、パラメーターを関数に渡す場合は、

閉鎖を使用できます。ノデリストをループするとき、この利益がどのように利益をもたらすかの良い例です。

閉鎖により、関数が実行された後に情報が利用できない場合、インデックスなどの追加情報を保持できます。

function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

追加のイベントハンドラーは(ループが終了した後)後で実行されるため、forループの適切な値を維持するために閉鎖が必要です。

function myFunction() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

forループからdoSomething()関数を抽出することで問題が発生する理由を理解する方が簡単です。

function add(a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ここでの解決策は、インデックスを関数パラメーターとして外部関数に渡すことで、値を内部関数に渡すことができます。通常、ハンドラー関数を使用して内部リターン関数を整理するために必要な情報が表示されます。

let myFunction = function() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

パッケージの閉鎖とその使用について詳しく知ります。

パラメーターとして関数式式を渡します

関数式は、中間の一時変数に値を割り当てる必要なく、関数に直接渡すことができます。

匿名関数の形で最も頻繁に表示されます。これがjQuery関数式の馴染みのある例です:

let add = function (a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数式は、forEach()などのメソッドを使用するときに配列アイテムを処理するためにも使用されます。

また、名前のない匿名関数である必要はありません。機能式の式を名前を付けて、機能が何をすべきかを表現し、デバッグを支援するのが最善です:

function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // 对选项卡执行操作。
        // 可以从此处访问 index 变量。
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}
ログイン後にコピー
ログイン後にコピー
function式をすぐに呼び出します(iife)

iifeは、機能や変数がグローバルな範囲に影響を与えるのを防ぐのに役立ちます。

ITのすべてのプロパティは、匿名関数の範囲内にあります。これは、他の場所のコードから予期しないまたは望ましくない副作用を防ぐための一般的なパターンです。

モジュールモードとしても使用され、簡単にメンテナンスされたセクションにコードブロックを含めることができます。 JavaScriptの閉鎖、コールバック、およびIIFEの謎を明らかにする際に、これらをより詳細に調査します。

これは、iife:

の簡単な例です

function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

…モジュールとして使用すると、コードを簡単に維持できます。

function myFunction() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

結論

ご覧のとおり、関数式は関数宣言と根本的に違いはありませんが、多くの場合、よりクリーンで読みやすいコードを生成できます。

これらは広く使用されているため、すべての開発者ツールボックスの重要な部分になります。上記で言及しなかった興味深い方法で、コードで関数式を使用していますか?コメントで教えてください!

関数式と関数宣言(FAQ)

に関する

FAQ

関数式と関数宣言の主な違いは何ですか?

関数式と関数宣言の主な違いは、JavaScriptエンジンがそれらを解釈する方法です。関数宣言は、コードが実行される前に解析されます。つまり、コードの後半で宣言された関数を呼び出すことができます。これは関数の持ち上げと呼ばれます。一方、関数式は宣伝されていないため、定義の前に呼び出すことはできません。

関数宣言と関数式の例を提供できますか?

もちろん、それぞれの例があります:

関数宣言:

function add(a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数式:

let myFunction = function() {
  // 执行某些操作
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数式の代わりに関数宣言をいつ使用する必要がありますか?

コード全体で使用される関数を作成する必要がある場合、通常はスコープの上部に宣伝されるため、関数宣言が使用されます。これは、コードで宣言する前に関数を呼び出すことができることを意味します。一方、関数式は、通常、1回または有限数のみを必要とする関数に使用されます。

機能式に名前を付けることができますか?

はい、関数式に名前を付けることができます。これは、関数の名前がスタックトレースに表示されるため、デバッグに非常に役立ちます。例は次のとおりです。

let add = function (a, b) {
  return a + b;
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数の改善とは何ですか?

JavaScriptの関数プロモーションは、コンピレーションフェーズ中(コードが実行される前)に関数宣言が含まれる範囲の上部に移動される動作です。これは、コードで宣言する前に関数を呼び出すことができることを意味します。ただし、関数式(変数に割り当てられた式でさえ)は宣伝されないことに注意する必要があります。

即時(iife)と呼ばれる関数式とは何ですか?

function式expression(iife)は、その定義の直後に実行される関数式です。 iifeの構文は次のとおりです

関数式と関数宣言を交換可能に使用できますか?
function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // 对选项卡执行操作。
        // 可以从此处访问 index 变量。
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}
ログイン後にコピー
ログイン後にコピー

関数式と関数宣言は通常同じ意味で使用されますが、注意すべきいくつかの重要な違いがあります。関数宣言は宣伝されています。つまり、宣言の前に呼び出すことができます。一方、関数式は宣伝されていないため、定義の前に呼び出すことはできません。さらに、関数式は匿名または名前が付けられますが、関数宣言は常に指名する必要があります。

関数式を使用することの利点は何ですか?

関数式はいくつかの利点を提供します。それらは匿名であることができ、自己執行可能に設定することができます(すぐに関数式を呼び出す)、変数に割り当てられて渡すことができます。これにより、閉鎖およびコールバック関数として使用するのに非常に適した関数式が非常に適しています。

関数式と関数宣言の間にパフォーマンスの違いはありますか?

一般に、関数式と関数宣言のパフォーマンスの違いは無視でき、JavaScriptコードのパフォーマンスに影響を与える可能性は低いです。関数の表現と関数宣言の選択は、特定のユースケースとコーディングスタイルの好みに基づいている必要があります。

機能式を閉鎖として使用できますか?

はい、関数式はJavaScriptに閉鎖を作成するためによく使用されます。閉鎖とは、独自の範囲、外部関数の範囲、およびグローバル範囲にアクセスできる関数です。これは、関数式を使用して作成された閉鎖の例です。

以上が関数式と関数宣言を使用するタイミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート