声明
JavaScript 闭包
1、计数器困境
设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。
var counter = 0;
function add() {
return counter += 1;
}
add();
add();
add();
// 计数器现在为 3
计数器数值在执行 add() 函数时发生变化。
但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值
function add() {
var counter = 0;
return counter += 1;
}
add();
add();
add();
// 本意是想输出 3, 但事与愿违，输出的都是 1 !
2、JavaScript内嵌函数
实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
以下实例中，内嵌函数 plus() 可以访问父函数 add() 的 counter 变量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。我们同样需要确保 counter = 0 只执行一次。
这个时候JavaScript闭包就派上用场了。
3、JavaScript 闭包
var add = (function () { //该自调用函数只执行一次
var counter = 0; //设置计数器为0
return function () {return counter += 1;} //返回函数表达式
})();
add();//1
add();//2
add();//3
// 计数器为 3
- 变量 add 指定了函数自我调用的返回字值。
- 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
- add变量可以作为一个函数使用。它可以访问函数上一层作用域的计数器。
- 计数器受匿名函数的作用域保护，只能通过 add 方法修改。
这个实例就展示了函数的闭包，它使函数拥有私有变量成为可能。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
它的保护原理就是只有通过add才能访问add的上一层作用域的私有变量counter
我的个人理解是返回的函数表达式就是add(这样说可能不太严谨)，该函数表达式的上一层作用域自然就是自调用函数的作用域，故该函数表达式也就是add自然就可以访问自调用函数的私有变量counter了，并且只有add可以访问这个私有变量，从而起到了所谓的闭包保护作用
随堂笔记
-
很多人看到最后这个计数器问题都会感到困惑, 我也一样。经过代码验证, 发现其中的奥妙在于：
var add = (function () { var counter = 0; return function () {return counter += 1;} })();注意: 为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?
我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。
注意add方法中的return, 它return的并不是1,2,3这样的数值,而是return了一个方法,并且把这个方法赋值给了add变量。
那么在这个function自运行一遍之后,其实最后赋值给add的是return counter += 1 这段代码。
所以后面每次调用add() 其实都是在调用return counter += 1。
再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。
-
理解闭包可以将以上代码分解如下：
function outerFunction() { var counter = 0; function innerFunction(){ return counter += 1; } return innerFunction; /* 注意 typeof outerFunction 是：function；而typeof innerFunction（）是number； */ } var add = outerFunction(); /* 调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次 内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。 */ add(); add(); add(); -
多看看 JavaScript 闭包 | 菜鸟教程 (runoob.com) 下边别人发表的笔记加深闭包理解
