导读

闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样。

但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解。

闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等。

在理解闭包以前.最好能先理解一下作用域链的含义,简单来说,作用域链就是函数在定义的时候创建的,用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止.当函数中需要查询一个变量的值的时候,js解释器会去作用域链去查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续.如果找到最后也没找到需要的变量,则解释器返回undefined。

了解了作用域链,我们再来看看js的内存回收机制,一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了.对应的内存空间也就被回收了.下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用.但是如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量的话.这种内存回收机制就会出现问题.如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了.所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收。

也就是说,有了闭包,嵌套的函数结构才可以运作,这也是符合我们的预期的.然后,闭包还有一些特性,却往往让程序员觉得很难理解。

探索

我们从内存结构上来讲解下 javascript中的闭包概念。

闭包：是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。

在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，这样我们可以很大程度上减少全局作用域中的变量，净化全局作用域。

使用闭包有如上的好处，当然这样的好处是需要付出代价的，代价就是内存的占用。

如何理解上面的那句话呢？

每个函数的执行，都会创建一个与该函数相关的函数执行环境，或者说是函数执行上下文。这个执行上下文中有一个属性 scope chain（作用域链指针），这个指针指向一个作用域链结构，作用域链中的指针又都指向各个作用域对应的活动对象。正常情况，一个函数在调用开始执行时创建这个函数执行上下文及相应的作用域链，在函数执行结束后释放函数执行上下文及相应作用域链所占的空间。

比如：

    //声明函数
    function test(){
        var str = "hello world";
        console.log(str);
    }

    //调用函数
    test();

在调用函数的时候会在内存中生成如下图的结构：

但是闭包的情况就有点特殊了，由于闭包函数可以访问外层函数中的变量，所以外层函数在执行结束后，其作用域活动对象并不会被释放（注意，外层函数执行结束后执行环境和对应的作用域链就会被销毁），而是被闭包函数的作用域链所引用，直到闭包函数被销毁后，外层函数的作用域活动对象才会被销毁。这也正是闭包要占用内存的原因。

所以使用闭包有好处，也有坏处，滥用闭包会造成内存的大量消耗。

使用闭包还有其他的副作用，可以说是bug，也可以说不是，相对不同的业务可能就会有不同的看法。

这个副作用是闭包函数只能取到外层函数变量的最终值。

测试代码如下:(这里使用了jquery对象)

    /*闭包缺陷*/
    (function($){
        var result = new Array(),
        i = 0;
        for(;i<10;i++){
            result[i] = function(){
                return i;
            };
        }
        $.RES1 = result;
    })(jQuery);

    // 执行数组中的函数
    $.RES1[0]();

上面的代码先通过匿名函数表达式开辟了一块私有作用域，这个匿名函数就是我们上面所说的外层函数，该外层函数有一个参数$,同时还定义了变量result和 I , 通过for循环给数组result赋值一个匿名函数，这个匿名函数就是闭包，他访问了外层函数的变量I , 理论上数组resulti 会返回相应的数组下标值，实际情况却不如所愿。

如上代码 $.RES10 的执行结果是10.

为什么会这样呢，因为i的最终值就是10.

下面我们通过下图来详细说明下，上面的那段代码执行时在内存中到底发生了什么：

闭包的应用:保护函数内的变量安全。如前面的例子，函数outer中i只有函数inner才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

在内存中维持一个变量。如前面的例子，由于闭包，函数outer中i的一直存在于内存中，因此每次执行rs()，都会给i加1。

那么这个副作用有没有办法可以修复呢？当然可以！

我们可以通过下面的代码来达到我们的预期。

    /*修复闭包缺陷*/
    (function($){
        var result = new Array(),
        i = 0;
        for(;i<10;i++){
            result[i] = (function(num){
                return function(){
                    return num;
                }
            })(i);
        }
        $.RES2 = result;
    })(jQuery);

    //调用闭包函数
    console.log($.RES2[0]());

上面的代码又在内存中发生了什么？我们同样用下面的一幅图来详细解释。看懂了上面的图，我们也就不难理解下面的图。

只要看懂上面的三张图，我们也就可以深入的理解清楚javascript中闭包的原理，以及闭包的好处和弊端，在我们的代码中合理的使用闭包，达到代码的整洁和高效。