js中的闭包

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

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

var name = 'window';

outer();

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

function inner(){
    console.log(name);
}     

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

1、作用域和执行上下文的区别

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

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

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

0.jpg

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

2、闭包

闭包在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。

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

1、由于闭包会使得函数中被引用的变量一直保存在内存中，消耗内存，所以谨慎使用闭包，否则会造成网页的性能问题。
2、闭包会改变父函数内部变量的值。如果父函数再次被执行的，而在外部已经执行过闭包修改变量的值，那么，这次执行的结果就会和上次的不一样。

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

var name = "window";

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

写在结尾：
如果觉得我写的文章对你有帮助，欢迎扫码关注我的公众号：海痕笔记
微信号：haihenbiji