JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不可欠な部分と見なすことで、JavaScript 言語は関数型プログラミング言語との密接な関係を示します。クロージャは複雑な操作を簡素化できるため、主流の JavaScript ライブラリや高レベルの製品コードでますます人気が高まっています。

1. 変数のスコープ

クロージャを紹介する前に、まず JavaScript の変数スコープを理解しましょう。変数スコープには、グローバル変数とローカル変数の 2 種類があります。

1. グローバル変数

var n = 999; //グローバル変数 function f1() {
        a = 100; //ここでもaはグローバル変数です。alert(n);
    }
    コンソールログ(a); //100

ここで、変数の値は関数の内外で直接取得できます - グローバル変数

2. ローカル変数

//ローカル変数関数f2() {
        var b = 22;
    }
    console.log(b); //エラー

ここで、関数内で定義された値は関数外から直接取得することはできません - ローカル変数

ここで、ローカル変数の値を外部から取得したい場合はどうすればよいでしょうか。
引き続きお読みください:

2. 外部からローカル変数を取得する方法

例を見てみましょう:

var outer = 'Outer'; // グローバル変数 var copy; 
function outerFn(){ // グローバル関数 var inner = 'Inner'; // この変数は関数スコープのみを持ち、外部からアクセスすることはできません function innerFn(){ // innerFn() は outerFn() 内にあります 
 // ここではグローバルコンテキストと周囲のコンテキストの両方を使用できます。
 // 外側と内側にアクセスできます 
 コンソールログ(外側); 
 コンソールログ(内部); 
 } 
 copy = innerFn; // innerFn() への参照を保存します // copy はグローバル コンテキストで宣言されているため、外部から使用できます} 
外側関数(); 
copy(); // innerFn() は直接呼び出すことはできませんが、グローバルスコープで宣言された変数を通じて呼び出すことができます

上記の例を分析してみましょう。変数 outer はグローバルコンテキスト内にあるため、innerFn() 内でアクセスできます。

outerFn()が実行された後、関数への参照をグローバル変数にコピーしてinnerFn()が実行されます。
これはコピーで実現されます。関数 innerFn() が変数コピーを使用して呼び出されると、関数 innerFn() は outerFn() のスコープ内になくなります。では、次のコードは失敗するのではないでしょうか?
コンソールログ(内部);
変数 inner の値は未定義であるはずですよね?ただし、上記のコードスニペットの出力は次のようになります。
「外側」
「内側」

これは JavaScript のチェーンスコープ構造です。子オブジェクトは、すべての親オブジェクトの変数を一度に 1 レベルずつ検索します。したがって、親オブジェクトのすべての変数は子オブジェクトに表示されますが、その逆はできません。

このようにして、関数内でローカル変数を取得できます。

3. 閉鎖の概念

上記のコードブロック内の copy() 関数はクロージャです。私の理解では、クロージャとは関数内の変数を読み取ることができる関数です。
JavaScript では、関数内のサブ関数を通じてローカル変数を取得できるため、クロージャは関数内で定義された関数として理解できます。
関数の内部と外部をつなぐ橋として理解することができます。

4. 閉鎖の役割

私の意見では、クロージャの役割は主に 2 つの側面に反映されます。

1. 関数内の変数を読み取ることができる

この効果は前のコードブロックで明確に実証されています。

2. ローカル変数の値はメモリ内に保持できる

ご存知のとおり、ローカル変数は使用されるときにのみメモリ内の一時的な記憶領域を占有し、関数が終了するとその領域は自動的に解放されます。クロージャの出現により、ローカル変数をグローバル変数と同様に一貫してメモリに保存できるようになりました。

        関数c1() {
            var z = 9999;
            nAdd = 関数() {
                1 より大きい
            }

            関数c2() {
                コンソールログ(z);
            }
            c2 を返します。
        }
        var 結果 = c1();
        結果(); //9999
        追加();
        結果(); //10000

上記のコードでは、c1() が 1 回実行され、その時点で z=9999 になります。nAdd() がもう一度実行され、z+1 が作成されます。そして、c1() がもう一度実行され、この時点での z の値 z=10000 が出力されます。これは、z の値は常にメモリに格納され、c1() の最初の呼び出し後に自動的にクリアされないことを意味します。

この時点で、クロージャを使用すると大量のメモリが消費されるので、クロージャを乱用しないように注意する必要があります。関数を終了する前に、未使用のローカル変数をすべて削除します。

JavaScript クロージャの問題の詳細な説明はこれで終わりです。より関連性の高い JavaScript クロージャの問題については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: