閉鎖メカニズムに関する簡単な説明

var foo = "こんにちは";

var c =(関数 a() {

関数 b(){

var bar = "ワールド";

アラート(foo + bar);

リターンバー;

}

bを返す;

})()();

alert(foo + c);

この例では、hello world が 2 回ポップアップ表示されます。

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

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

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

関数 a(){

var i=0;

関数 b(){

アラート(++i);

}

bを返す;

}

var c = a();

c();

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

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

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

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

関数a内の関数bが関数aの外の変数から参照されるとクロージャが作成されます。

クロージャが何をするのかを知らないので、まだクロージャを理解していないと思います。探索を続けましょう。

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

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

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

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

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

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

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

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

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

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

5. 次のステップは、関数 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 を実行し、見つかるまで順番に検索します。スコープ チェーン全体で見つからない場合は、未定義が返されます。関数 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 は実行後にリサイクルされません。