JavaScript一看就懂(2)闭包
认识闭包之前需要先了解作用域，如果你对作用域还没有足够了解，请移步JavaScript一看就懂(1)作用域
什么是闭包？
我们可以先简单认为：一个函数a定义在另一个函数b里面，这个函数a就是闭包：
function b() {
...
function a() { //闭包
...
}
...
}
另外，函数a能够直接读取函数b的变量x：
function b() {
var x = 1;
function a() {
alert(x);
}
a();
}
b(); //1
这其实不是什么新鲜事，这是由作用域决定的。
上面的代码只是为了简单地认识闭包的组成部分，但却不是真正意义上的闭包，下面才是正宗长沙臭豆腐，哦不，正宗闭包：
function b() {
var x = 1;
function a() {
alert(x++);
}
return a;
}
var func = b();
func(); //1
func(); //2
func(); //3
b()这次没有直接调用a()，而是返回了函数a给变量func，而func()才是真正调用a()的地方，等于是跳出了原来的圈子在外围被调用了，而函数a竟然能神奇地记住变量x，这就是闭包的魔力。
所以什么是闭包？结合上面的代码来解释的话：
闭包就是无论函数a在哪里执行，它都能联系上变量x
纯字面上来理解的话：
一个函数没有在它定义时所在的作用域里执行，但它仍能访问那个作用域里的变量
说人话那就是：
函数记得它周围发生了什么
也就是书上说的：
函数以及它所连接的周围作用域中的变量即为闭包
闭包：使得函数可以维持其创建时所在的作用域。如果一个函数离开了它被创建时的作用域，它还是会与这个作用域以及其外部的作用域的变量相关联
闭包就是函数能够记住并访问它的词法作用域，即使当这个函数在它的词法作用域之外执行时
闭包就是当一个函数即使是在它的词法作用域之外被调用时，也可以记住并访问它的词法作用域
看看哪个说法好理解就拿来对着代码多揣摩几遍，不信你不懂
闭包有什么用？
1.回调
我们其实经常用到闭包，可能自己都不知道，比如下面这个点击按钮获取验证码的例子：
function countDown(){
...
document.getElementById('getCode').onclick = function(){ //闭包
...
};
}
页面加载完成时，获取验证码的按钮被绑定了一个点击回调事件（没有执行），当用户点击时，才真正被执行
完整代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head></head>
<body>
<button type="button" id="getCode">获取验证码</button>
<script>
countDown(9);
function countDown(time_wait){
time_wait = time_wait || 60; //等待时间
var time_left = time_wait; //剩余等待时间
document.getElementById('getCode').onclick = function(){ //闭包
var btn = this;
btn.disabled = true;
btn.innerHTML=time_left--;
var count = setInterval(function(){ //闭包
if(time_left<1){
btn.disabled = false;
btn.innerHTML="获取验证码";
time_left = time_wait;
clearInterval(count);
}else{
btn.innerHTML=time_left--;
}
},1000);
};
}
</script>
</body>
</html>
当用户点击按钮时，执行了这个回调函数并且它能够读取到外围的time_wait和time_left变量。
细心的朋友可能已经发现这里出现两个闭包了，一个是onclick，还有一个是setInterval定时函数。
2.面向对象
当然还有一个更重要的原因需要它，那就是OO，把上面发送验证码的代码改造一下变成面向对象风格
var c1 = CountDown(document.getElementById('getCode'), 5);
c1.run();
function CountDown(btn, time_wait) {
time_wait = time_wait || 60;
var time_left = time_wait; //剩余等待时间
function resetBtn(){
btn.disabled = false;
btn.innerHTML="获取验证码";
}
function run(){
btn.onclick = function(){
btn.innerHTML=time_left--;
btn.disabled = true;
var count = setInterval(function(){
if(time_left<1){
resetBtn();
time_left = time_wait;
clearInterval(count);
}else{
btn.innerHTML=time_left--;
}
},1000);
};
}
//相当于公共方法
return {
run: run
};
}
只有在return返回的对象里面的run方法才能对外服务，而resetBtn()相当于是私有方法
所以回过头来看问题，为什么要用闭包？
- 回调（setTimeout、setInterval、onclick...）
- 面向对象
闭包会带来什么问题？
1.循环里的闭包
<!DOCTYPE html>
<html lang="zh-cn">
<head></head>
<body>
<input type="button" id="btn1" value="1" />
<input type="button" id="btn2" value="2" />
<input type="button" id="btn3" value="3" />
<script>
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = function() {
alert(i);
};
}
});
</script>
</body>
</html>
乍一看感觉就是对应地弹出1,2,3，但现实是无论你点击哪个按钮，都会弹出4，因为onclick绑定的函数是个闭包，页面加载后for循环开始执行，当你点击按钮的时候，for循环已经执行完了，此时i值为4，而闭包拿到的i值当前的i值，而不是循环中的i值，所以弹出的都是4。
要解决这个问题，可以把打印的代码提炼到另一个函数里面，这样就会产生一个新的作用域，从而避开闭包带来的共享：
function show(i){
return function(){
alert(i);
}
}
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = show(i);
}
});
或者用立即执行函数表达式(IIFE)：
window.addEventListener("load", function() {
for (var i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = (function(i) {
return function(){
alert(i);
}
}(i));
}
});
当然还有一种更牛逼的方式：
window.addEventListener("load", function() {
for (let i = 1; i < 4; i++) {
var btn = document.getElementById("btn" + i);
btn.onclick = function() {
alert(i);
};
}
});
2.构造器
方法应该定义到对象的原型，而不要定义到对象的构造器中。原因是这将导致每次对象实例化时，方法都会被重新定义一次。
function User(name) {
this.name = name;
this.getName = function() {
return this.name;
};
}
改成如下，继承的原型可以为所有实例共享：
function User(name) {
this.name = name;
}
User.prototype.getName = function() {
return this.name;
};
参考资料
- 阮一峰>学习Javascript闭包
- MDN>Web技术文档>JavaScript>闭包
- JavaScript Closures Demystified
- JavaScript for PHP Developers
- 深入理解JavaScript
- secrets of javascript closures
- You Don't Know JS
