JSクロージャー( closure)の原理と機能

クロージャ(クロージャ, 英語: closure)はJavaScript言語の難しい点であり特徴でもあり、高度なアプリケーションの多くはクロージャに依存して実装されています。クロージャは変数のスコープや変数のライフサイクルと密接な関係があるので、ここでは簡単に紹介します。

 

クロージャとは何ですか

いわゆるクロージャは関数を指します。 2 つの関数が相互にネストされている場合、内側の関数がクロージャになります。

JavaScript では、関数はオブジェクトに属し、オブジェクトはプロパティのコレクションであり、プロパティの値はオブジェクトになる可能性があるため、関数内で関数を再定義できます。例えば、関数Aの中で関数Bを定義し、その関数の外で関数Bを呼び出す処理がクロージャです。

クロージャを形成するための条件は、次の例に示すように、内部関数が外部関数 return を通じて返される必要があることです。

 function funOne(){    // 外部関数
    var num = 0;      // ローカル変数
    function funTwo(){   // 内部関数
        num++;                 
        return num;
    }
    return funTwo;
}
var fun = funOne();             // 関数 funTwo を返す 

上記のコードはクロージャを構成しており、実際には関数 fun です。

クロージャーの使用

クロージャの機能を紹介する前に、まず JavaScript の GC (ガベージ コレクション) メカニズムを理解しましょう。

JavaScript では、オブジェクトが参照されなくなった場合、そのオブジェクトは GC によって再利用されます。それ以外の場合、オブジェクトは常にメモリ内に保持されます。上記の例では、内部関数 funTwo() は外部関数 funOne() で定義されているため、funTwo() は funOne() に依存し、グローバル変数 fun は funTwo() を参照するため、 funOne() は間接的に参照されます。楽しい。したがって、次の例に示すように、funOne() は GC によって再利用されず、常にメモリに保存されます。

 function funOne(){
    var num = 0;
    function funTwo(){
        num++;
        console.log(num);
    }
    return funTwo;
}
var fun = funOne();
fun();      // 出力：1
fun();      // 出力：2
fun();      // 出力：3
fun();      // 出力：4 

num は外部関数 funOne() の変数で、その値は内部関数 funTwo() で変更され、関数 funTwo() は実行されるたびに num に 1 を加算します。クロージャの特性により、関数 funOne() 内の変数 num は常にメモリに格納されます。

クロージャは、関数内でいくつかの変数を定義する必要があり、関数の外部のグローバル変数に影響を与えることなく、これらの変数を常にメモリに格納できるようにする必要がある場合に使用できます。

上記はクロージャを記述する最も原始的な方法ですが、実際の開発では、次の例に示すように、クロージャは通常、匿名関数と組み合わせて使用​​されます。

 var funOne = (function(){
    var num = 0;
    return function(){
        num++;
        return num;
    }
})();
console.log(funOne());      // 出力：1
console.log(funOne());      // 出力：2
console.log(funOne());      // 出力：3 

さらに、次の例に示すように、同じクロージャ メカニズムで、互いに関連せず独立した複数のクロージャ関数を作成できます。

function funOne（i）{
    function funTwo（）{
        console.log（'数字：'+ i）;
    }
    return funTwo;
};
var fa = funOne（110）;
var fb = funOne（111）;
var fc = funOne（112）;
fa（）;       // 出力：数字：110
fb（）;       // 出力：数字：111
fc（）;       // 出力：数字：112