史上最详细的javascript闭包（Closure）说明

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了，但是一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，今天在网上看到了一篇讲JavaScript闭包的文章(原文链接)，讲得非常好，这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了，在此写出来和大家分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！以下内容大部分是来自原文，我在原文的基础上加上一些代码注释和运行效果图以及少许的修改，方便大家理解！

一、变量的作用域

　　要理解闭包，首先必须理解Javascript特殊的变量作用域。

　　在JavaScript中，变量的作用域分两种：全局变量和局部变量。

　　在Javascript中，在函数内部可以直接读取全局变量。

var n=999;
function f1(){
    alert(n); // 在函数内部可以访问全局变量n
}
f1(); // 999

但是反过来则不行，在函数外部无法读取函数内的局部变量。

function f1(){
    var n=999; // 在f1函数内部定义局部变量n
}
alert(n); // 无法访问

这里有个需要注意的地方，就是函数内部声明变量的时候，一定要使用var命令；如果不使用，则实际上是声明了一个全局变量。

二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1(){
    var n=999;//f1函数内部的局部变量n
    //在f1函数内部定义一个f2函数
    function f2(){
    alert(n); // 999，在f2函数内部是可以访问局部变量n的
    }
}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！或许有人会有疑问，f2是一个函数啊，怎么能够作为f1函数的返回值返回呢，其实是可以的，JavaScript中的函数名本身就是变量，所以函数也可以当作普通变量来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的返回值返回。

function f1(){
    var n=999; // 局部变量n
    //声明函数f2
    function f2(){
        alert(n);
    }
    return f2; // 将f2函数作为f1的函数的返回值
}
var result=f1(); // f1调用完后的返回值是一个f2函数，此时result就是f2
result(); // 999,调用f2函数

三、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢？请看下面的代码。

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1(); // result就是f2函数
result(); // 第一次调用result函数，999
nAdd(); // 调用匿名函数
result(); // 第二次调用result函数，1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

四、闭包的缺点

1、闭包会使得函数中的变量都被保存在内存中，内存的消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决办法就是：在退出函数之前，将不使用的局部变量全部删除。

2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。

五、思考题

如果能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

代码片段一

var name="The Window";
var object={
    name:"My Object",
    getNameFun:function(){
        return function(){
            return this.name;
        }
    }
};
alert(object.getNameFun()());

运行结果：The Window
分析如下：

/*
在javascript中，我们声明的javascript全局对象、全局函数以及全局变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
*/
var name="The Window"; // 声明一个全局变量name，此时这个name就成为window对象的一个属性，就能用window.name的形式去访问name
var object={
    name:"My Object" // object对象的name属性
    getNameFun:function(){ // object对象的getNameFun函数
        //object对象的getNameFun方法的返回值是一个匿名函数
        return function(){
            return this.name; // 此时这个this指的是window对象，this指的是调用this所在函数的对象。既然this代表的是window对象，那么this.name访问的自然就是window对象的name属性“The Window”
        }
    }
}

代码片段二

var name="The Window";
var object={
    name:"My Object",
    getNameFun:function(){
        var that=this;
        return function(){
            return that.name;
        }
    }
};
alert(object.getNameFun()());

运行结果：My Object
分析如下：

var name="The Window";
var object={
    name:"My Object",
    getNameFun:function(){
    //此时的this代表object对象，that是getNameFun函数的一个局部变量
        var that=this;
        return function(){
        /**
        * that是getNameFun函数里面声明的一个局部变量，正常情况下getNameFun函数调用完成后，that这个局部变量就会被GC回收，释放掉内存。
        * 但是现在that能一直正常使用，原因就是getNameFun函数是匿名函数的父函数，而getNameFun函数调用完后将这个匿名函数返回并付给了一个全局变量retEn，这导致匿名函数始终在内存中。
        * 而匿名函数的存在依赖于getNameFun这个父函数，因此getNameFun函数也始终在内存中，不会再调用结束后被GC回收。
        * 既然getNameFun函数一直在内存中，那么getNameFun函数内部声明的that局部变量在内存中也会一直存在，那么当然可以一直使用。
        */
        return that.name;//that代表的是object对象，那么that.name访问的自然就是”My Object“
        }
    }
}
alert(object.getNameFun()());