js中的闭包

在上一篇文章“执行环境和做用域”中，我试着梳理了执行环境和做用域的关系。但实际上，文章中并无提到做用域，而是介绍了执行环境和做用域链。这里先把上篇文章的坑填了。

上篇文章的最后，我提了一个问题。这里把代码稍微修改下，以下：

var name = 'window';

outer();

function outer(){
    var name = 'outer';
    inner();    //输出什么？
}

function inner(){
    console.log(name);
}复制代码

这段代码很简单，但很容易迷惑人。不少人可能会认为，应该输出“outer”，但实际上结果确实“window”。这是为何呢？

一、做用域和执行上下文的区别

做用域和执行上下是两个不一样的概念。执行上下文在上篇文章中已经解释过了：在函数执行时建立。那么，做用域怎么理解呢？

做用域能够理解为一套规则，这套规则用来管理引擎如何在当前做用域以及嵌套的子做用域中根据标识符名称进行变量查找。同执行环境同样，做用域只有两种（不考虑eval）：全局做用域与函数做用域。

在js中代码整个的执行分为两个阶段：代码编译和代码执行。代码编译由编译器完成，将代码翻译成可执行代码。代码执行由js引擎完成，主要任务是执行可执行的代码。在代码编译阶段，做用域规则就已经被肯定了。到代码执行时，执行上下文被建立，同时，做用域链做为做用域规则的具体实现被构建出来。过程以下图：

0.jpg

再回头去看开头的问题，就不难理解了：在编译阶段，inner函数的相关的做用域规则就已经肯定了，在而outer函数中执行时，只是具体地实现了相关的做用域的规则，也就是构建做用域链，而这个做用域链上面没有outer函数执行环境相对应的变量对象，而是有全局执行环境对应的window对象，所以，结果是‘window’。

二、闭包

闭包在js高程中的解释是：有权访问另外一个函数做用域中的变量的函数。简单说就是，假设函数a是定义在函数b中的函数，那么函数a就是一个闭包。正常状况下，在函数的外部访问不到函数内部的变量，但有了闭包就能够间接的实现访问内部变量的须要。也就是说，闭包是链接函数内部和外部的桥梁。这就是闭包的第一个做用：访问函数内部的变量。还有另一个做用就是：让被引用的变量值始终保持在内存中。

在上一篇文章中提到代码当执行到一个函数时，会建立一个临时的活动对象，并把这个对象做为变量对象推入环境栈中。当这个函数执行完的时候，这个对象就会出桟，并被销毁。但当闭包中引用了函数中的变量时，那么，这个变量就会保存在内存中。也就是上面提到的闭包的第二个做用。之因此为这样，是由于JavaScript的回收机制。

基本全部浏览器都是使用“标记清除”的方式回收内存。也就是说，当变量进入执行环境的时候（在函数中声明一个变量），就给变量添加标记，而当函数执行完的，变量再也不被引用的时候，再添加删除的标记，垃圾收集器就会自动清楚这个变量占有的内存。但在闭包中引用了函数中的变量，而闭包又被看成结果返回时，闭包中的由于被引用就不会被清除。例如，下面的代码：

function fn1(){
    var a = 1;
    return function(){
        console.log(++a);
    }

}

var fn2 = fn1();

fn2();        //输出2

fn2();        //输出3复制代码

在这段代码中，fn1中的闭包函数被看成结果返回，在闭包中的引用的变量a由于被引用而没有被清除，一直保存在内存当中，因此执行fn2的时候会输出不断增长的结果：2和3。

使用闭包时须要注意的问题

一、因为闭包会使得函数中被引用的变量一直保存在内存中，消耗内存，因此谨慎使用闭包，不然会形成网页的性能问题。
二、闭包会改变父函数内部变量的值。若是父函数再次被执行的，而在外部已经执行过闭包修改变量的值，那么，此次执行的结果就会和上次的不同。

最后再来一段代码，想下输出的代码，没疑问的化，闭包的运行机制基本就掌握了：

var name = "window";

var obj = {
　　name : "obj",
　　getName : function(){
　　　　return function(){
　　　　　　return this.name;
　　　　};
　　}
};
　　
console.log(obj.getName()());复制代码

写在结尾：
若是以为我写的文章对你有帮助，欢迎扫码关注个人公众号：海痕笔记
微信号：haihenbiji