Javascript クロージャの深い理解 初心者編_JavaScript スキル

1. クロージャとは何ですか?

「公式」の説明は次のとおりです。いわゆる「クロージャ」は、多くの変数とこれらの変数にバインドされた環境を含む式 (通常は関数) を指します。したがって、これらの変数も、という表現。

あまりにも学術的な記述のため、この文章を直接理解できる人は少ないと思います。クロージャの作成プロセスをスキップしてクロージャの定義を直接理解することは非常に難しいため、JavaScript でクロージャを作成する方法を使用してクロージャが何であるかを説明したいと思います。以下のコードを見てください:

コードをコピー コードは次のとおりです:

function a( ){
var i=0;
関数 b(){
alert( i);
return b;
var c = a();
c();


このコードには 2 つの特徴があります:

1. 関数 b は関数 a 内にネストされています;

2. 関数 a は関数 b を返します。

このように、var c=a() を実行すると、変数 c は実際には関数 b を指します。c() を再度実行すると、i の値を表示するウィンドウが表示されます (1 回目は1) 。このコードは実際にクロージャを作成します。なぜでしょうか。関数 a の外側の変数 c は関数 a 内の関数 b を参照するため、つまり

関数 a 内の関数 b が関数 a の外側の変数によって参照されると、クロージャーが作成されます。

クロージャが何をするのかを知らないので、まだクロージャを理解していないと思います。引き続き調べてみましょう。

2. クロージャの機能は何ですか?

つまり、クロージャの機能は、 a が実行されて返された後、クロージャは、 Javascript のガベージ コレクション メカニズム GC が、 a の内部関数のために a によって占有されているリソースを再利用するのを防ぐことです。 b の値は a の変数に依存します。これはクロージャの役割を非常に簡単に説明したものであり、専門的でも厳密でもありませんが、一般的な意味は、クロージャを理解するには段階的なプロセスが必要であるということです。

上記の例では、クロージャの存在により、関数 a が戻った後は常に a の i が存在します。このように、c() が実行されるたびに、i は i の値になります。 1 を追加すると警告が表示されます。

次に、a が関数 b 以外の値を返す場合、状況はまったく異なります。 a が実行された後、b は a の外に戻されるのではなく、a によってのみ参照されるため、関数 a と関数 b は相互に参照しますが、干渉されません。外部の世界によって (外部の世界によって参照される)、関数 a と b は GC によってリサイクルされます。 (JavaScriptのガベージコレクションの仕組みについては後ほど詳しく紹介します)

3. クロージャ内のミクロの世界

クロージャをより深く理解したい場合ネストされた関数 a と関数 b の間の関係については、関数実行コンテキスト (実行コンテキスト)、アクティブ オブジェクト (呼び出しオブジェクト)、スコープ (スコープ)、およびスコープ チェーン (スコープ チェーン) という他のいくつかの概念を導入する必要があります。これらの概念を説明するために、関数 a の定義から実行までのプロセスを例として取り上げます。

1. 関数 a を定義するとき、js インタープリターは関数 a のスコープ チェーンを、a を定義するときに a が存在する「環境」に設定します。 a がグローバル関数の場合、ウィンドウ オブジェクトのみが存在します。スコープチェーン内。

2. 関数 a が実行されると、a は対応する実行コンテキストに入ります。

3. 実行環境を作成するプロセスでは、最初に a にscope属性が追加されます。これはaのスコープであり、その値は手順1のスコープチェーンです。つまり、a.scope=a のスコープ チェーンです。

4. 次に、実行環境は呼び出しオブジェクトを作成します。アクティブ オブジェクトもプロパティを持つオブジェクトですが、プロトタイプを持たないため、JavaScript コードから直接アクセスできません。アクティブ オブジェクトを作成した後、そのアクティブ オブジェクトを のスコープ チェーンの先頭に追加します。この時点で、a のスコープ チェーンには、a のアクティブ オブジェクトとウィンドウ オブジェクトの 2 つのオブジェクトが含まれています。

5. 次のステップでは、アクティブ オブジェクトに argument 属性を追加します。これには、関数 a を呼び出すときに渡されるパラメーターが格納されます。

6. 最後に、関数 a のすべての仮パラメータと内部関数 b への参照を a のアクティブ オブジェクトに追加します。このステップでは関数 b の定義が完了したので、ステップ 3 と同様に、関数 b のスコープチェーンを b が定義されている環境、つまり a のスコープに設定します。

これで関数 a 全体の定義から実行までが完了しました。このとき、a は関数 b の参照を c に返し、関数 b のスコープ チェーンには関数 a のアクティブ オブジェクトへの参照が含まれます。これは、b が a で定義されたすべての変数と関数にアクセスできることを意味します。関数 b は c によって参照されており、関数 b は関数 a に依存しているため、関数 a は復帰後に GC によってリサイクルされません。

関数bを実行すると上記と同じになります。したがって、次の図に示すように、実行中の b のスコープ チェーンには、b のアクティブ オブジェクト、a のアクティブ オブジェクト、ウィンドウ オブジェクトの 3 つのオブジェクトが含まれます。

図に示すように、関数 b でアクセスした場合、a の場合変数が使用されている場合、検索順序は、最初にそれ自体のアクティブ オブジェクトを検索し、存在しない場合はそれを返します。関数 a のアクティブ オブジェクトの検索を続け、それが見つかるまで順番に検索します。見つかった。スコープ チェーン全体で見つからない場合は、未定義が返されます。関数 b にプロトタイプのプロトタイプ オブジェクトがある場合、関数 b は、自身のアクティブ オブジェクトを検索した後、最初に独自のプロトタイプ オブジェクトを検索し、その後検索を続けます。これは、JavaScript の変数検索メカニズムです。

4. クロージャの適用シナリオ

1. 関数内の変数を保護します。最初の例を例にとると、関数 a の i には関数 b によってのみアクセスでき、他の手段ではアクセスできないため、i のセキュリティは保護されます。

2. 変数をメモリ内に保持します。前の例と同様に、クロージャにより、関数 a の i は常にメモリ内に存在するため、c() が実行されるたびに、i は 1 ずつインクリメントされます。

上記の 2 点はクロージャの最も基本的な適用シナリオであり、多くの古典的なケースはこれらから生じています。

5. Javascript のガベージ コレクション メカニズム

Javascript では、オブジェクトが参照されなくなった場合、そのオブジェクトは GC によってリサイクルされます。2 つのオブジェクトが相互に参照し、サードパーティによって参照されなくなった場合、相互に参照している 2 つのオブジェクトもリサイクルされます。関数 a は b によって参照され、b は a の外側の c によって参照されるため、関数 a は実行後にリサイクルされません。