昨天晚上听别人谈起闭包这个东西，虽然对js有一点了解但却丝毫没有印象，今天也没什么事就顺便研究了一下满足好奇宝宝。整合于网上的理解，记录一下。
一、闭包的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
- 全局作用域
- 局部作用域 ：一个 function 形成一个独立的作用域, 而且方法作用域还能够嵌套.
与别的语言不同的是: 花括号({})不能形成一个独立的作用域, 例如Java中的作用域.
下面我们举例说说作用域
1 var m = 1;
2 function f(){
3 //这里面就形成了一个方法作用域, 能够保护其中的变量不能被外部访问
4 //方法作用域能够访问全局作用域
5 var n = 2;
6 alert(m);//会弹出m值
7 // 嵌套方法作用域
8 function f1(){
9 // 这里面再度形成了一个方法作用域
10 // 其中可以访问外部的那个方法作用域
11 var n1 = 3;
12 alert(n);
13 }
14 //出了f1作用域就不能访问f1的变量了
15 //alert(n1); 报错
16 }
二、闭包
弄清楚作用域的问题后, 我们就可以开始聊聊闭包了。
我们以最经典的for循环为例来讲解. 大家可以试试下面这段代码, 取自JavaScript 秘密花园循环中的闭包
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
输出结果为 10个10 ；
如果在运行前, 你没有猜到正确答案, 那就对了...
- 首先说说为什么最终输出的是10次10, 而不是你想象中的 0, 1, 2, 3, 4, 5, 6, 7, 8,9
因为setTimeout是异步的!
你可以想象由于setTimeout是异步的, 因此我们将这个for循环拆成2个部分
第一个部分专门处理 i 值的变化, 第二个部分专门来做setTimeout
因此我们可以得到如下代码：
-
// 第一个部分 i++; ... i++; // 总共做10次 // 第二个部分 setTimeout(function() { console.log(i); }, 1000); ... setTimeout(function() { console.log(i); }, 1000); // 总共做10次这样一拆后, 我相信你肯定知道之前那个for循环的运行结果了.
由于循环中的变量 i 一直在变, 最终会变成10, 而循环每每执行setTimeout时, 其中的方法还没有真正运行, 等真正到时间执行时, i 的值已经变成 10 了!
i 变化的整个过程是瞬间完成的, 总之比你异步要快, 就算你setTimout是0毫秒也一样, 会先于你执行完成.
-
for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 0); } - 那么为什么setTimeout中匿名function没有形成闭包呢?
因为setTimeout中的匿名function没有将 i 作为参数传入来固定这个变量的值, 让其保留下来, 而是直接引用了外部作用域中的 i, 因此 i 变化时, 也影响到了匿名function.
因此如果我们定义一个外部函数, 让 i 作为参数传入即可"闭包"我们要的变量了!!
for (var i = 0; i < 10; i++) {
// 注意关键是我们把想要闭包的值当参数传入一个方法
// 这个方法 return 一个新的方法 -- 闭包!!
setTimeout(fn(i), 1000);
}
function fn() { // 为了深刻理解闭包, 这个函数我没有用参数
// 神奇的"闭包"发生在这一步, 其实就是作用域和值复制在起了关键作用,
// 对于数字/字符等类型是复制值, 而不是引用
var a = arguments[0];
return function() {
console.log(a); // 注意现在我操作的变量已经变成 a 了,
// 已经和 i 没有半毛线关系了!
// 而 a 的值就是当时执行时赋予的一个确定值,
// 不会因 i 的变化而变化了!
};
}
- 再换成更简洁的方式看你能不能真正理解闭包
for (var i = 0; i < 10; i++) {
(function(a) {
// 变量 i 的值在传递到这个作用域时被复制给了 a,
// 因此这个值就不会随外部变量而变化了
setTimeout(function() {
console.log(a);
}, 1000);
})(i); // 我们在这里传入参数来"闭包"变量
}
这就是闭包, 简单点说就是专门用来"包养"变量的.
总结：
（1）闭包是一种设计原则，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的；
（2）网上主流的对闭包剖析的文章实际上是和闭包原则反向而驰的，如果需要知道闭包细节才能用好的话，这个闭包是设计失败的；
（3）尽量少学习。