【JavaScript】クロージャ(closure)

クロージャ(closure)について解説する。

クロージャを簡単に説明すると「関数オブジェクトの1つ」である。
ただし、クロージャは単純な関数オブジェクトではなく、「環境付き」の関数オブジェクトである。

JavaScriptの関数は、その関数が作成されたときの「環境」を保持するように設計されている。
クロージャは関数の中に関数を定義する。このとき、内側の関数が外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセス可能である。
この内側の関数は、外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセスできる環境付きの関数オブジェクト(クロージャ)である。

つまり、関数を定義して、その関数の中に関数を定義してあったらクロージャである。

次にクロージャのサンプルコードを示す。
closureTest関数の中にret関数を定義してある。
外側の関数はclosureTest関数であり、内側の関数はret関数である。

closureTestを呼び出してcounter関数を生成する。
counter関数を実行するたびに10づつ値が増えていく。

新しくclosureTestを呼び出すと、そこで生成された関数は全く別の環境を保持することになる。
counter関数の環境とcounter2関数は異なる環境である。

let closureTest = function() {
    let ctr = 0;
    let ret = function() {
        ctr += 10;
        console.log(ctr);
    }
    return ret;
};

let counter = closureTest();

counter(); //10
counter(); //20
counter(); //30

let counter2 = closureTest();

counter2(); //10

counter(); //40

この記事の続き
【JavaScript】クロージャ(closure)とonclickメソッド (attacktube.com)

参考
JavaScript：the　good　parts 「良いパーツ」によるベストプラクティス [ ダグラス・クロフォード ] ExternalLink P43～46
日経ソフトウェア 2014年10月号(日経BP社) P132～137

• 
• Tweet

• JavaScript