JavaScript之一： 闭包、执行环境、作用域链

　　这是大虾的第一篇博文，大虾试图用最直白的语言去描述出所理解的东西，大虾是菜鸟，水平有限，有误的地方希望路过的朋友们务必指正，谢谢大家了。

　　从读书时代一路走来，大虾在学习的时候逐渐喜欢上了去追寻根源，这个东西到底是为什么？他有什么用处？他解决了什么问题？他是怎么被想到的？从这些问题当中，我们能够学到非常多，大虾深有体会。我相信，即使是这些东西在发明之时，就算是创始人也未必思考的这么周全，很多情况下，它一定是先遇到了什么实际问题之后，再去思考解决方案。也就是说，每一个新知识新东西的提出，一定是为着解决某个问题而出现的，否则他的存在就没有意义，而脱离了实际问题的学习也是没有意义的。在学习这个东西的过程中，大虾很看重的是，假如同样的是遇到了这个问题，大虾会怎么做去解决？别人又是怎么解决的？为什么别人的解决方案这么优秀？他是怎么想到的？我怎么就想不到呢？这种过程使大虾受益匪浅。

　　话不多说，切入正题。本文主要介绍闭包。相信很多人只知道学闭包，直接去看他的原理，实现过程什么的，但是根据我的了解来看，初学者知道闭包的用途的并不多，为什么需要闭包？这些都不清楚，然而在大虾看来，这个非常重要，因为它对应着实际问题的解决，理论脱离了实践将变得毫无意义。

　　话说二十年前，祖师爷创立js的时候，那时候页面并不复杂，大型的网页也不多，页面没什么js的时候，人们写页面时全局变量是随便定义的，直到某一天，随着页面js的增多，问题来了。拿一个模拟的alert来说，如果这么写：

var temp=a;
var abs=function(){};
var yourAlert=function(){};

　　那么在这种情况下，全局变量temp,abs,yourAlert就被污染了。也就是说，如果要实现另外一个功能，比如说按钮btn，这个时候也需要写自己的代码，那么它的变量起名必须重新起名，必须避开上面的变量，否则就会把上面的内容给覆盖掉。这些新功能一旦数量很多，那么你的起名就必须避开所有的已用过的变量名，你必须挨个检查所有功能的变量名以保证他的不重复，这样就给开发带来很大的不方便。所以迫切的需要一种方法来避免它，来保护变量不被篡改污染。再者，在页面中，经常遇到多次调用的情况，同样以上面的alert为例，假如用户触发了10次alert，如果说每一次的触发都要重新创建一个alert的话，那样岂不是特别麻烦，特别消耗内存？这个时候同样需要一种能够反复调用的方法来优化代码的执行性能。　

　　闭包应运而生。

　　来看看闭包的实现过程，他到底是如何实现并且达到上述目的并解决实际问题的呢？深刻的理解整个本质的实现过程有助于我们的开发运用。

　　当一个函数被调用时，一个执行环境(也称执行上下文)就会被创建(execution context),然而在js引擎内部，这个执行环境创建过程被分为了2个阶段：

　　　　1、  建立阶段(此时还并没有执行具体的函数体的代码)

　　　　　　　　建立变量对象(variable object)：函数里面的arguments对象、函数参数、内部变量、函数声明

　　　　　　　　　　1、  建立arguments对象，检查当前环境下的参数，建立该对象下的属性和属性值

　　　　　　　　　　2、  检查当前环境下的函数声明：每找到一个函数声明，就会在变量对象里用函数名建立一个属性，属性值就是指向函数地址的引用。如果该函数名已经存在，那么其对应的属性值就会指向新的引用。

　　　　　　　　　　3、  检查当前环境下的变量声明：每找到一个变量声明，就在变量对象下建立一个属性，其值为undefined(此时还未赋值)。如果该变量名已经存在，会直接跳过(防止指向函数的属性值被变量属性覆盖为undefined)

　　　　　　　  建立作用域链

　　　　　         　　当前变量对象被添加到执行环境的前端

　　　　　　　  确定this的值

　　　　2、  代码执行阶段

　　　　　　　　执行函数中的代码，对变量赋值、函数引用、执行其他代码等等…

　　具体的来看一个函数的代码：

 function f(x){
   var a=20;
   var b=function(){

   };
   function d(){
 　
    };
 }
 f(100);

　　在调用f(100)的时候，执行环境的建立阶段发生如下变化：

fExecutionContext{ // f函数执行环境
　　variableObject:{// f函数变量对象(对于函数来说，也称为活动对象AO)
　　　　arguments:{
　　 　　　　0:100;
　　　　　　 length:1;
　　　　},
　　　　x:100,
　　　　d:pointer to function d()//指向d函数的引用，实际上保存的是地址,它的顺序也在变量声明之上
　　　  a:undefined,
　　　  b:undefined,　
　　},
　 scopeChain:{....},//作用域链
　　this:{...}// this值
}

　　当上述建立阶段结束，js引擎立马进入执行阶段，一行一行的运行函数代码，给variableObject的属性赋值，执行阶段完成如下：

 fExecutionContext{ // f函数执行环境
　　variableObject:{// f函数变量对象(对于函数来说，也称为活动对象AO)
　　　　arguments:{
   　　 　　0:100;
   　　　　 length:1;
 　　　　},
　　　　x:100,
       d:pointer to function d()//指向d函数的引用，实际上保存的是地址，它(函数声明)的顺序也在变量声明之上
 　　　 a:20,
 　　　 b:pointer to function b(),　
　　},
 　 scopeChain:{....},//作用域链
　　this:{...}// this值
 }

　　事实上，如果这个环境是函数，变量对象并不能够被直接访问到，此时函数的活动对象(AO)将代替变量对象的角色。我们可以看到，上述环境中，执行环境的作用域链也被创建完成。

　　那作用域链又是什么呢？事实上，在函数的创建时，会预先创建一个包含全局变量对象的作用域链。作用域链的本质是一个指向变量对象的指针列表！它只是引用而实际上并不包含变量对象！为了方便理解，可以把它想象成一根链条(实际上并不是真的存在这么一根链条)，上面依次标记着顺序0,1,2,3.......，每一个数字对应着一个变量对象。在访问变量对象中的属性时，只能按照标记的顺序按0,1,2,3...的顺序依次访问，在这个链条的最前端，始终是当前执行的代码所在的环境的变量对象(可以理解为顺序标记为0)，创建执行环境时，当前函数的活动对象将会被推入到作用域链的最前端！而下一个变量对象则来自其外部函数(顺序标记为1)，再下一个则是外部函数的外部函数，全局执行环境的变量对象始终是链条的最后位置，全局的变量对象始终是最后一个被访问到。

　　在本例中，以函数f为例，其作用域链关系如下图

　　在寻找变量名和函数名的时候，会首先在顺序为0的位置的变量对象中寻找(也就是它自己的活动对象)，如果找不到，就会向下一级变量对象寻找(函数的外部函数的变量对象，在作用域链中顺序标记为1)，一直搜索到最后一个对象——全局环境的变量对象为止。全局环境的变量对象始终存在于每一个作用域链中！当函数执行完毕后，函数的活动对象就会被销毁，内存中仅保存全局变量对象。

　　然！而！且！慢！闭包的情况不一样啊！

　　看下面这个超级简单的例子。

 function f(){
   var a=20;
   return function d(){
 　　a--;
    };
 }
 var sB=f();
 sB();

　　上面的d函数是直接定义在函数f的内部中的，即是说函数f是函数d的外部函数，按照上面所述原则，在函数d的作用域链中，函数f的变量对象会被添加进函数d的作用域链中！此时函数d的作用域链一共有3个对象：函数d的活动对象会被标记为0，函数f的变量对象会被标记为1，全局变量对象标记为2，访问时按照0,1,2的顺序访问，寻找变量时先在自己的活动对象里找，再去顺序为2即函数f里面找，这样就能访问外部函数f中的所有变量。然而当函数f执行完毕时，它的执行环境的作用域链会被销毁，但它的活动对象并没有被销毁，仍然保存在内存中，匿名函数d的作用域链仍然在引用着这个活动对象，直到匿名函数d被销毁，函数f的活动对象才会被销毁。这就是闭包的最大的不同之处！

　　我们来画个流程图，理解下闭包过程中所发生的变化。从函数的创建开始。

　　前方高能，多图预警！请在wifi下点开，土豪请无视。

1、函数f的创建

2、函数f开始执行了

3、执行到 return语句

4、执行var sB=f();

5、调用函数d

6、执行完毕

　　这就是闭包的整个实现过程，闭包实现后，可以在全局反复调用内部函数d（），此时在即使全局定义相同的变量a，调用函数时，使用的值仍然是函数f的活动对象里面的值，外面的更改无法影响到局部变量a。这里只是做个简单的介绍，闭包还有很多应用情况，实际情况也更加复杂，还有很长的路要走。

　　参考书籍：《JavaScript高级程序设计第3版》

　　参考内容：　http://tieba.baidu.com/p/2348703848

　　　　　　　　http://blogread.cn/it/article/6178?f=sa