javascript深入了解（闭包）

时间：2022-06-21 17:35:49
观看者：不能理解闭包的人，需要对javascript作用域链有了解，如果没有，可以看我上一篇文章javascript深入了解（作用域）； 目标：深入了解闭包的原理； 实现方式：代码及相关文字解释，请逐步运行代码并理解里面每句的含义。
闭包：原理是指有权访问另一个函数作用域中的变量的函数。如下面的例子：
 
var name = 'fanlizhi';
function callName(){
var age = '22';
alert(name);
alert(age);
}
callName('fanlizhi');//fanlizhi/22
这个就是闭包，函数里面能够访问到age，也可以访问到函数外面的name.其实这只是最简单的闭包，但是原理都是一样的，当函数里面嵌套函数就变得没那么容易理解了，其实理解闭包最主要的是理解作用域链，这个我在前面的javascript深入理解（作用域）中已经说的很多了，这些也是理解闭包的基础。当我们调用一个函数，他会创建一个作用域链，当函数用完就会销毁作用域链，但是当我们将函数赋值给一个变量后，由于变量存在于外部环境，他也有自己属于的作用域链，所以在这个变量销毁之前也会保存原来函数中所需要的作用域。
 
function count(){
for(var i=0; i<10; i++){
}
alert(i);
}
count();//10
这个我前面javascript深入理解（作用域）中也讲过为什么i最后是10，原因是当前作用域（活动对象），只有一个i，它的值是公用的，当叠加后因为是同一个i所以最后是10，那么我们再看看闭包后的情况：
 
function count(){
var a =[];
for(var i=0; i<10; i++){
a[i] = function(o){
return function(){
alert(o);
};
}(i)
}
return a;
}
var a = count();
for(var i=0; i<10; i++){
a[i]();//[0,1,2,3,4,5,6,7,8,9]
}
这里我们定义了一个数组a，然后每次执行循环里面都会调用a[i] = function(o){return function(){alert(o)};}(i); 我们这里将一个function 赋值给数组a，每进一次function都会传递进一个i的值，并返回一个function和该function的作用域链，这个作用域链包含了第二层作用域链中的i的值也就是o的值，这里的o的值被我们封装一层后成为了单独的值o而不是公用的i。我们来变形一下可能更加清楚了:
 
function count(){
var a =[];
var fun =function(i){
return function(){
alert(i);
}
}
for(var i=0; i<10; i++){
a[i] = fun(i);
}
return a;
}
var a = count();
alert(a);//functions 数组
for(var i=0; i<10; i++){
a[i]();//[0,1,2,3,4,5,6,7,8,9]
}
这里我们再函数内部定义了一个方法，然后每循环一次都调用这个方法并将值返回给a数组，然后返回a，这里剔除掉了上面o的干扰可能更加清晰，我们还打印了a，发现里面存的全是function，这也印证了，我们返回的不仅仅是function，还有他们各自的作用域链中的i的值。这个归咎于我们多次的将方法赋值给变量，让他们不断的成为拥有更大作用域的变量的值，来保存他们各自的作用域链不被销毁。
标签：

相关文章