JavaScriptのクロージャの詳しい説明

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

JavaScript では、クロージャは理解するのが難しい概念です。 ECMAScript におけるクロージャーの定義は次のとおりです。 クロージャーは、計算されない変数を含む関数の字句表現を指します。つまり、関数は関数の外部で定義された変数を使用できます。

この定義を読んで、さらに混乱を感じませんか?心配しないで、分析しましょう。

• クロージャは関数です

• クロージャは外部で定義された変数を使用できます

• クロージャは変数が定義されているスコープ内に存在します

少しわかりやすくなったように見えますが、それを使用すると外部で定義された変数は何を意味するのでしょうか? まず変数のスコープを見てみましょう。

変数スコープ

変数は、グローバル変数とローカル変数に分けることができます。グローバル変数のスコープはグローバルであり、グローバル変数は js 内のどこでも使用できます。関数内で変数を宣言するには var キーワードを使用します。このときの変数は、変数が宣言された関数内のみであり、関数の外からはアクセスできません。

var func = function(){
    var a = 'linxin';
    console.log(a);         
    // linxin}func();console.log(a);             
    // Uncaught ReferenceError: a is not defined

スコープは比較的単純ですが、クロージャと密接に関係する変数のライフサイクルを見てみましょう。

変数のライフサイクル

グローバル変数、ライフサイクルは永続的です。ローカル変数。変数を定義する関数呼び出しが終了すると、変数はガベージ コレクション メカニズムによってリサイクルされ、破棄されます。関数が再度呼び出されると、新しい変数が再定義されます。

var func = function(){
    var a = 'linxin';
    console.log(a);}func();

a はローカル変数です。 func が呼び出された後、a は破棄されます。

var func = function(){
    var a = 'linxin';
    var func1 = function(){
        a += ' a';
        console.log(a);
    }
    return func1;}var func2 = func();func2();                    
    // linxin afunc2();                    
    // linxin a afunc2();                   
    // linxin a a a

func2 への最初の呼び出しの後、func の変数 a は破壊されずに 'linxin a' になることがわかります。この時点で func1 がクロージャーを形成するため、 a のライフサイクルが継続します。

これで、閉鎖がより明確になりました。

• クロージャは、上記の func1 関数などの関数です。

• クロージャは、破棄されないように、他の関数によって定義された変数を使用します。たとえば、上記の func1 は変数 a

• を呼び出し、変数が定義されているスコープにクロージャが存在します。変数 a が func のスコープに存在する場合、func1 もこのスコープに存在する必要があります。

これで、これら 3 つの条件を満たすものが閉鎖であると言えます。

シンプルで古典的な例を通してクロージャについてもっと詳しく見てみましょう。

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        console.log(i)    
     }, 0)
}

コンソールでは 0 1 2 3 が出力されると単純に考えているかもしれませんが、実際には 4 4 4 4 が出力されます。これはなぜでしょうか? setTimeout 関数は非同期であることがわかり、関数が実行されるまでに for ループは終了しているため、function() { console.log(i) } は変数 i を検索します。 4しか取れません。

前の例では、クロージャが変数 a の値を保存したことを思い出したので、ここではクロージャを使用して 0 1 2 3 を保存することもできます。

for (var i = 0; i < 4; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i)        
        }, 0)   
     })(i)
 }

i=0の場合、無名関数にパラメータとして0を渡します。このとき、function(i){}この無名関数のiの値は0です。setTimeoutを実行すると以下のようになります。外側の層を検索すると、0 が得られます。このサイクルを繰り返すことで、目的の 0 1 2 3 を得ることができます。

メモリ管理

クロージャ内でローカル変数を呼び出すと、ローカル変数が時間内に破棄されるのを防ぎます。これは、常にメモリを占有するグローバル変数と同等です。これらの変数によって占有されているメモリを再利用する必要がある場合は、変数を手動で null に設定できます。

ただし、クロージャを使用する過程で、JavaScript オブジェクトと DOM オブジェクトの間で循環参照が形成されやすくなり、メモリ リークが発生する可能性があります。これは、ブラウザのガベージ コレクション メカニズムでは、2 つのオブジェクト間で循環参照が形成されると、それらをリサイクルできないためです。

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    }

上記の例では、 func 関数内の匿名関数を使用してクロージャが作成されています。変数 test は、test という ID を持つ DOM オブジェクトを参照する JavaScript オブジェクトです。DOM オブジェクトの onclick 属性はクロージャを参照し、クロージャは test を呼び出すことができるため、循環参照が形成され、両方のオブジェクトが実行できなくなります。リサイクルされること。この問題を解決するには、循環参照内の変数を null に設定するだけです。

function func() {
    var test = document.getElementById('test');
    test.onclick = function () {
        console.log('hello world');
    }
    test = null;}

func関数内で匿名関数を使用せずにクロージャを作成し、外部関数を参照する場合には、循環参照の問題は発生しません。

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