[javascript]クロージャについて

昨日、丁度、会社説明会の資料が完成したのですが、資料に入れるページ数をクロージャで作りました。

そこで、今回、復習の意味をこめて、クロージャについて書いていきたいと思います。

wikipediaによると、クロージャとは

クロージャ (Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。

via:クロージャ

と書かれていて、同記事に、javascriptの例もありました。

function  newCounter()  {
        var  i  =  0;
        return  function()  {  //  無名関数
                i  =  i  +  1;
                return  i;
        }
}
c1  =  newCounter();
alert(c1());  //  1
alert(c1());  //  2
alert(c1());  //  3
alert(c1());  //  4
alert(c1());  //  5

via:クロージャ

と書かれていたのですが、実感がわかないので、実際に上のように、コーディングしてみました。



ボタンをクリックすると、ドンドン数字が増えていくと思います。

これのすごいところは、同じファンクションを呼び出しているのにもかかわらず、変数を再定義(上の場合、変数i)することなく既に宣言された変数を使っているところ。

(おそらくパソコン内のメモリに一番最初に宣言された変数の値が入っているのかと思われる。)

しかも、同じファンクションを別の変数で宣言した場合、同じ関数を使って宣言しているのもかかわらず、あたかも別のファンクションとして、それぞれ独立した値を保持しているところがすごい。

実際にコーディングしてみると、

function  newCounter()  {         var  i  =  0;         return  function()  {  //  無名関数                 i  =  i  +  1;                 return  i;         } } c1  =  newCounter(); c2  =  newCounter(); alert(c1());  //  1 alert(c1());  //  2 alert(c1());  //  3 alert(c1());  //  4 alert(c1());  //  5 alert(c2());  //  6ではなく、1になる alert(c2());  //  7ではなく、2になる

と書いた場合、c1とc2は、それぞれ独立して値を保持します。





クロージャおそるべし。