closures - JavaScript callback function - JavaScript闭包是如何工作的?

javascript closures in depth / 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) {
    //每三次执行一次操作
    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) {
      //每三次执行一次操作
      console.log("Third time's the charm!");

      //重置计数器
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

一个简单的单行闭包

// _______________________立即调用______________________
//         |                                                                |
// | 保留使用范围___返回____ |
// | 仅按返回的函数| 功能的价值| |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

所有返回函数之外的变量都可以被返回函数使用,但它们不能直接被返回函数对象使用......。

func();  //提醒“ val”
func.a;  // 不明确的