closures - Airbnb/javascript style Guide - JavaScriptのクロージャはどのように動作しますか?

Google JavaScript Style Guide / javascript / function / variables / scope

クロージャが構成する概念(例えば、関数や変数など)を知っていても、クロージャそのものを理解していない人に、JavaScriptのクロージャをどのように説明しますか?

28 revs, 21 users 17%



Answer #1
//イベントハンドラのスコープ外でカウンタを宣言します
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  //カウンターの外側をインクリメントします
  counter++;

  if (counter === 3) {
    // 3回ごとに何かをする
    console.log("Third time's the charm!");

    //カウンターをリセットします
    counter = 0;
  }
});
<button id="button">Click Me!</button>
var element = document.getElementById('button');

element.addEventListener("click", (function() {
  //カウントを0に初期化します
  var count = 0;

  return function(e) { // <-この関数はクリックハンドラーになります
    count++; //そして上記の `count`へのアクセスを保持します

    if (count === 3) {
      // 3回ごとに何かをする
      console.log("Third time's the charm!");

      //カウンターをリセットします
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

シンプルな1行のクロージャー

// _______________________即時呼び出し______________________
//         |                                                                |
// | 使用のために保持されたスコープ___として返される____ |
// | 返された関数によってのみ| funcの値| |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

返された関数の外側にあるすべての変数は、返された関数で利用可能ですが、返された関数オブジェクトでは直接利用できません...。

func();  //アラート「val」
func.a;  //未定義