javascript的闭包

最新推荐文章于 2020-11-29 14:35:48 发布

原创最新推荐文章于 2020-11-29 14:35:48 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了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