ホームページ > ウェブフロントエンド > jsチュートリアル > JSでクロージャを理解する方法

JSでクロージャを理解する方法

零到壹度
リリース: 2018-03-31 17:20:46
オリジナル
1334 人が閲覧しました

クロージャは JavaScript の大きな難点であり、特徴でもあります。多くの高度なアプリケーションはクロージャに依存しています。この記事では主に、JS でクロージャを理解する方法について説明します。必要な方はご覧ください

1. 変数スコープ

クロージャを理解するには、まず JavaScript の特殊な変数スコープを理解する必要があります。

変数のスコープは 2 つだけです: グローバル変数とローカル変数です。

JavaScript 言語の特別な点は、グローバル変数は関数内で直接読み取ることができますが、関数内のローカル変数は関数の外部から読み取ることができないことです。

注: 関数内で変数を宣言するときは、必ず var コマンドを使用してください。これを使用しない場合、実際にはグローバル変数を宣言していることになります。

2. 関数内のローカル変数を外部から読み取るにはどうすればよいですか?

さまざまな理由により、関数内でローカル変数を取得する必要がある場合があります。ただし、前述したように、通常の状況ではこれは不可能です。これは回避策によってのみ実現できます。

それは、関数の中に別の関数を定義することです。

function f1(){
    var n=999;
    function f2(){      alert(n); // 999    }
  }
ログイン後にコピー

上記のコードでは、関数 f2 が関数 f1 の中に含まれています。このとき、f1 内のローカル変数はすべて f2 から見えます。ただし、その逆は機能しません。f2 内のローカル変数は f1 には見えません。

これは、JavaScript 言語に特有の「チェーン スコープ」構造です。

子オブジェクトは、すべての親オブジェクトの変数をレベルごとに検索します。したがって、親オブジェクトのすべての変数は子オブジェクトから見えますが、その逆はありません。

f2はf1のローカル変数を読み込めるので、f2を戻り値として使用する限り、f1の外にある内部変数を読み込むことはできないのでしょうか?

3. クロージャの概念

上記のコードの f2 関数はクロージャです。

さまざまな専門文献におけるクロージャの定義は非常に抽象的です。私の理解では、クロージャは他の関数の内部変数を読み取ることができる関数です。

JavaScriptではローカル変数を読み込めるのは関数内のサブ関数のみなので、クロージャは単純に「関数内で定義された関数」と理解できます。

つまり、本質的に、クロージャは関数の内部と関数の外部をつなぐ橋です。

4. クロージャーの使用法

クロージャーはさまざまな場所で使用できます。これには 2 つの大きな用途があります。1 つは、前述したように関数内の変数を読み取ることです。もう 1 つは、これらの変数の値をメモリに保持し、f1 が呼び出された後に自動的にクリアされないようにすることです。

なぜですか?その理由は、f1 が f2 の親関数であり、f2 がグローバル変数に割り当てられているため、f2 は常にメモリ内に存在し、f2 の存在は f1 に依存するため、f1 は常にメモリ内にあり、削除されないためです。呼び出しが完了すると、ガベージ コレクション メカニズム (ガベージ コレクション) によってリサイクルされます。

このコードでもう 1 つ注目すべき点は、「nAdd=function(){n+=1}」という行です。まず、var キーワードが nAdd の前に使用されていないため、nAdd はローカル変数ではなくグローバル変数です。 。次に、nAdd の値は匿名関数であり、この匿名関数自体もクロージャであるため、nAdd は関数の外部で関数内のローカル変数を操作できるセッターと同等です。

5. クロージャ使用時の注意点

(1) クロージャは関数内の変数をメモリに格納するため、大量のメモリを消費するため、クロージャを悪用することはできません。 Web ページの問題により、IE でメモリ リークが発生する可能性があります。解決策は、関数を終了する前に、未使用のローカル変数をすべて削除することです。

(2) クロージャは、親関数内の変数の値を親関数の外で変更します。したがって、親関数をオブジェクトとして使用し、クロージャをそのパブリック メソッドとして使用し、内部変数をプライベート値として使用する場合は、親関数内の変数の値を自由に変更しないように注意する必要があります。関連する推奨事項:

javascriptjs閉鎖の詳細な理解

js-c-closure詳細説明

以上がJSでクロージャを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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