JS闭包作用域解析

什么是闭包？

简单理解，当在一个函数的外部访问函数内部定义的变量的时候就会形成一个闭包，由这个理解可以知道，当一个函数执行完成的时候，一般情况下，其作用域会被销毁，其内部定义的变量也会变得不可访问，所以闭包打破了这个现象。闭包造成一个函数执行完成之后，其创建的作用域不会被销毁，因为它被函数外部的对象或者变量所引用。由此可知，闭包可以实现作用域的延时存在，但这也会造成内存的泄露。所以在明确知道自己需要使用闭包的时候，采取使用闭包，否则就不要使用闭包。

Eg：

function demo(){

var internal=10;

return function (){

           alert(internal);

};

}

demo()();

以上的代码执行之后会弹窗显示10.我们在demo方法的外部打印了其内部的变量，这个就是闭包。

1. 作用域产生的原理

我们知道，当执行一个函数的时候，其访问变量的顺序是，首先在其自己的作用域上查询，如果查询不到，则会往其上层作用域来查询，一直查询到最终根作用域（也就是window对象），如果还是查询不到，则会抛出一个undefined的错误。

那么作用域是如何产生的呢？

首先在执行js代码之前，会产生一个全局作用域GO，也就是window对象（后面不再说明），而对于一个函数执行之前会创建自己的作用域AO，并持有其上层函数的作用域，以形成一个作用域链。

作用域创建的基本步骤：

1、  创建一个AO，并持有上层函数的作用域

2、  初始化形参和内部声明的变量（变量声明的提升）,并初始化为undefined

3、  将形参和实参相统一

4、  函数定义整体提升

以一下代码为例

function a(){

var a1=0;

function b(){

         var b1=1;

         function c(){

                   var c=2;

}

c();

}

b();

}

a();

当js执行之前会创建一个GO

GO{

a:function()…

}

执行a函数的时候会创建a函数的作用域AO

a_AO{

           AO_chain:GO,

           a1:0,

           b:function()…

}

由以上定义可知

b的AO为

b_AO{

AO_Chain:a_AO,

b1:1,

c:function()…

}

c的作用域与此类似，由于此处重点是为了根据作用域来解释闭包的原因，所以这里不再详细的说明作用域，如不了解请自行百度。

1. 闭包

eg:有如下一个函数

function demo(){

var arr=[];

for(var i=0;i<10;i++){

         arr[i]=function(){

         document.write(i+ “ ”);

}

}

return arr;

}

var arr=demo();

for(var j=0;j<10;j++){

arr[j]();

}

熟悉闭包的人都知道最后打印的结果是10个10

 10 10 10 10 10 10 10 10 10 10

大家知道这是由于闭包对变量的持有造成的，那么根据作用域的原理是怎么产生的呢？

1. GO

GO{

   arr = undefined,

   demo = function()…

}

1. demo 的AO

d_AO{

ao_chain:GO,

   arr=[],//用于存放10个函数

   i=0

}

1. 当执行完成 arr=demo[]之后；

d_AO{

   ao_chain:GO,

arr=[function()…,function()…{}],//10个函数，每个函数都是//function(){document.write(i + ‘ ’)}

i=10

}

1. 执行arr数组中的函数的时候

a_AO{

   ao_chain:d_AO

}

从上面的作用域链可以知道，当数组的函数想要访问i变量的时候，发现它自己的作用域中没有这个变量，所用会通过其作用域链进行查询，然后在d_AO中找到了i对象，此时i对象的值变为了10，所以arr数组中的所有的函数最后打印的结果都是一样的。

为了解决这个问题，可以使用立即执行函数

如下

function demo(){

var arr=[];

for(var i=0;i<10;i++){

         (function(j){arr[j]=function(){

         document.write(j+ “ ”);

}})(i);

}

return arr;

}

var arr=demo();

for(var j=0;j<10;j++){

arr[j]();

}

结果如图

 0 1 2 3 4 5 6 7 8 9

从作用域的解释来看（如果对立即执行函数不了解的，请百度查阅立即执行函数的相关内容）

1. GO

GO{

   arr = undefined,

   demo = function()…

}

1. demo 的AO

d_AO{

ao_chain:GO,

   arr=[],//用于存放10个函数

   i=0

}

前两步与上面的方法创建的作用域相同

第3步开始有些差异

1. 执行demo函数的时候

在执行demo函数的时候，因为内部存在一个立即执行函数，所以这个匿名函数会被立即执行，它也会创建自己的作用域

n_AO{

ao_chain:d_AO,

j:n//这里的n保存的是i的当前值，例如第一个n对应的为j：0

}

//对应的arr[j]=function(){document.write(j+ “ ”);},j不会被替换，仍然是保持引用

1. 执行arr函数的时候

arr_AO{

   ao_chain:n_AO//例如arr[1]对应的就是ao_chain:1_AO

}

从上面的作用域链可以看出，当执行arr中的函数的时候，例如执行arr[2]的时候，首先到自己的作用域查询j变量，发现找不到j，于是沿着作用域链进行查找，首先查询2_AO，在2_AO中找到了j变量，此时j变量的值为2，于是打印的结果就为2，这样我们就实现了我们得需要。

以上解释若有错误，还望指点，包涵。谢谢！

作者：此坑已满

原文链接：https://www.cnblogs.com/ckym/p/10435092.html