画像はAphinya Dechalertが作成しました。クロージャーの秘密を解き明かします。

JavaScriptのクロージャを理解する

実際、他のチュートリアルがあなたに伝えようとしているものよりもずっと簡単です

JavaScriptクロージャは、単に説明が頻繁に行われているという理由だけで頭を包み込むのが難しいトピックの1つです。ほとんどのチュートリアルでは、それは関数内の関数であると言っていますが、実際には、すべての背後に深い意味があります。

「クロージャを理解せずにECMAScript言語で書くことは、クラスを理解せずにJavaを書くことに似ています」— JSONの父、ダグラス・クロックフォード

以下のコードを見てみましょう。

シンプルな小さなコード

ただし、上記のコードはあまり効率的ではありません。グローバルスコープを使用し、変更から保護するものは何もありません。

多くの人は、JavaScriptが字句スコープ言語であることをしばしば忘れます。これは、継承が内側に流れることを意味します。関数外の変数は関数内で使用できますが、その逆はできません。

外部の関数内で宣言された値は使用できません。

以下のコードは、xが関数の外部にある変数であるため、クロージャーです。

関数クロージャ構造内の従来の関数の例xがブラウザーコンソールのクロージャーであることの証明

しかし、質問は次のようになります。クロージャが関数外の変数の消費である場合、次のコードがクロージャではないのはなぜですか?

JavaScriptがステートメントを評価する方法のため、上記はクロージャではありません。関数のスコープが一度作成され、メモリが割り当てられます。処理は、関数の最後に到達し、メモリが解放されるまで行われます。エクササイズで得られる永続性はなく、作成された価値は永久に失われます。

変数スコープは関数の外部ではないため、クロージャーではありません。

ただし、関数内に関数をラップすると、別のスコープが作成されます。これは、終了時に関数を破棄しないようにJavaScriptに指示する、コードを囲む一種のリングフェンスです。

以下のコードのカウンター変数は、呼び出されている関数の外側にあるため、囲まれた変数になります(つまり、インクリメント)。その結果、独自の一意の値のセットを持つ関数インスタンスを無制限に作成できます。

したがって、変数counterは、上記のコードスニペットのクロージャーです。

ある意味では、クロージャーは保存されたデータを持つ単なる関数です。クロージャーを作成すると、JavaScriptに関数内の物事の状態を記憶するように指示します。使用される変数のみが「クロージャー」と見なされます。

クロージャーは呼び出し後にプライベート変数データを記憶するという点でステートフル関数であるため、これは特に便利です。外部関数は明示的なアクセス呼び出しでは変数にアクセスできないため、変数はプライベートです。これにより、関数全体が自己完結型になり、その変数が不要な変更から保護されます。

職場での語彙スコーピング。

したがって、JavaScriptのクロージャーは、明示的にクラスを作成することなく、コードをモジュール式の自己完結型の方法に簡潔に切り分ける方法です。クロージャーを使用すると、コードの複製が可能になり、必要なグローバルスコープの量が減ります。

クロージャを書くことは、関数を別の関数の中に置くだけの行為ではありません。外部の変更から保護され、アプリケーションの他の部分から完全に隔離され、永続的にステートフルな変数を作成するために使用される手法です。

接続を維持し、毎週のすばらしいWebダイジェストニュースレターリストに参加しましょう。読んでくれてありがとう。❤

アフィニア