Browse By

JavaScriptのクロージャについて

Pocket

JavaScriptのクロージャについて

変数のスコープ

JavaScriptのスコープについてで説明したようにJavaScriptには変数にアクセスできる範囲が存在します。クロージャでは関数の中に関数を定義して、その関数の中で変数を定義することで変数を隠蔽します。

カウンターの実装例を見てみましょう。

普通のカウンター

var count = 0;
function counter(){
    count++;
    console.log(count);
}
counter(); // 1
counter(); // 2

クロージャを使ったカウンター

function createCounter(){
    var count = 0;
    return function(){
        count++;
        console.log(count);
    }
}
var counter1 = createCounter();
counter1(); // 1
counter1(); // 2

var counter2 = createCounter();
counter2(); // 1
counter2(); // 2
counter2(); // 3

count = 100;
counter1(); // 3

countはグローバル変数ではなく、関数の内部で宣言されたローカル変数です。外部からは変更ができないように隠蔽されているのが分かります。またcounter1とcounter2でそれぞれcountが使用されているはずですが、それぞれ別のものとして参照されます。

入門 React.js その1
入門 React.js その2 JSXについて
入門 React.js その3 Hello world!してみよう


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>