読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

今さらJavaScriptのクロージャがハラオチした

JavaScript

仕組みはなんとなくわかってても、どこでそんなん使うんやろ?っていう。
使ってみてこそはじめてわかるというもので。

参考:JavaScriptのクロージャについて - console.lealog();

関数を返す関数と言ったり、状態を保持する関数とか言ってみたり・・。
こんな記事を以前書いてましたね。
書いて概念を知りつつも、実際のところどんな場面で使うんそれ?って思ってました。

クロージャ

以下のソースにコメントを打って考えます。

(function(win){
    // クラス名のショートカット 
    var classNames = {
      hoge: 'hoge',
      piyo: 'piyo'
    };
  
    // このスクリプトのメイン実装
    var Test = {

      // 公開したい大事な変数たち
      pub: 'var',
      pub2: 'foo',
//   prv: true // [2]こんな風にして

      // [1]この関数を実装するために、大事じゃないけど変数が欲しくなったら・・?
      closure: (function(){
        // [3]関係ないところから参照できるようにしちゃっても良いけど、それはしたくない・・。

        var prv = true; // [4]ここに宣言して使えればいいけど、毎回初期化されちゃう・・
        // [5]クロージャならそれができる!
        return function(){
          prv = !prv;
          console.log(prv);
        }
      }())
  
    };

    Test.closure(); // false
    Test.closure(); // true
    Test.closure(); // false <- おお、状態を保持しとる!

    win.Test = Test;

  }(this));

今まで関数にばっかり目が行ってましたが、どちらかというと関数内で宣言した変数が状態を保持してるので、そいつが重要なような。

いつもより関数を1段階深くしてあげるだけで、状態が保持できるようになるお得な感じ!
これは使えるヤツやで・・!

参考:クロージャ - JavaScript | MDN