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