javascript的闭包

59 阅读 0 评论 39 点赞

我是靠谱客的博主欣喜宝马，最近开发中收集的这篇文章主要介绍javascript的闭包，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

(1)一段常见的闭包代码

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function(){
console.log(i);
};
};
for (var j = 0; j < 10; j++) { //如果把j替换为i, 那么会发生什么呢?
a[j]();
};
// 输出10次的10

可以看到, 此时a[j]()执行代码console.log(i), 这里的i就是全局变量window.i, 也就是10(因为i是执行到10才跳出for循环的).

(2)修改代码:

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function(arg){
return function(){
console.log(arg);
}
}(i);
};
for (var j = 0; j < 10; j++) {
a[j]();
}; // 依次输出0, 1, ..., 9

于上面代码的区别在于, 在for循环中,使用了一个变量arg来保存i的值. 而arg保存于每个a[j]函数的function scrope的Closure(闭包)中.因此, a[j]()在调用变量arg时,获取的是自身作用域的闭包中的相应值, 所以才能够依次输出0-9.

(3)再次修改代码:

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function(){
this.arg = i;
console.log(this.arg);
};
};
for (var j = 0; j < 10; j++) {
a[j]();
};
// 输出10次的10

关键在于this.arg, 这里的this === a, 所以 this.arg其实还是个全局变量, 则有this.arg = a.arg = window.a.arg = 10