JavaScript中的闭包

前言：问题放在那，一直都是问题，因为害怕不敢去了解，不是把问题看得太神圣，就是太安于现状。其实当自己下定决心要弄个明白时，一切就不是那么可怕了。对于JavaScript中的闭包这个概念，之前一直在闪躲，可是当你直面问题时，说不好就弄明白了呢！下面就来说说闭包吧。

---

一. 什么是闭包

相信你在想要弄明白闭包的时候，一定知道了“JavaScript的作用域和作用域链”了，如果还没明白，可以先去看下这篇：http://blog.csdn.net/picking_up_stones/article/details/56979801 ，会帮你加深理解。其实所谓闭包，简单的说就是函数，一个什么样的函数呢？就是一个嵌套在外部函数内部的函数，在闭包中可以访问外部函数中的局部变量。如下：

function test()
{
    var name = "塞上江南果";
    function sayhello(){
        console.log("hello," + name);
    }
    return sayhello;
}

var t = test();
t();

上面的代码中sayhello()就是一个闭包，它定义在test()函数的内部，且可以访问test()函数的局部变量name。

二. 怎样就会产生闭包

如上面小例子的代码就会产生闭包，因为sayhello()函数定义在test()函数的内部，并且它使用了test()函数内部的局部变量name，所以就产生了闭包。在声明t变量时引用了test，实际上也就是引用了sayhello，然后sayhello又引用了test的局部变量name，导致t在执行结束后，垃圾回收器无法对name进行回收，就形成了闭包。如下小例子：

function test()
{
    var count = 0;
    function show(){
        count++;
        console.log(count);
    }
    return show;
}

var t = test();
t();  //1
t();  //2

由上面的结果可以看出，t在执行完后，count变量并没有被回收（count不会被回收是因为，在test函数执行完后，show函数得执行要依赖test中的count），而是被缓存起来，在第二次执行时直接引用了。

三. 闭包的作用

（1）封装数据

function Person()
{
    var name = '';
    var age = 0;

    return {
        setName: function(name){
            this.name = name;
        },

        setAge: function(age){
            this.age = age;
        },

        getName: function(){
            return this.name;
        },

        getAge: function(){
            return this.age;
        }
    }
}

var p = Person();
p.setName('塞上江南果');
p.setAge(22);
console.log(p.getName());  //塞上江南果
console.log(p.getAge());  //22

此时的name和age属性，在闭包外部是不可访问的属性，只能通过闭包getName()和getAge()来访问。

（2）缓存数据

function test()
{
    var count = 0;
    function show(){
        count++;
        console.log(count);
    }
    return show;
}

var t = test();
t();  //1
t();  //2

还是这个例子，它将count变量缓存下来，再后面用的时候可以直接自增。

四. 用闭包需要注意

（1）当闭包中用到的某个局部变量，如果不再使用时，可以将它销毁，不然会消耗占用内存空间，造成网页性能的问题。
（2）在循环中慎用闭包，不然会造成运行结果错误，如下：

var a = [];
function test(){
    for (var i = 0; i < 3; i++){
        var show = function(){
            a[i] = i;
        };
    }
    return show;
}

var t = test();
t();
console.log(a[0]);  //undefined
console.log(a[1]);  //undefined
console.log(a[2]);  //undefined
console.log(a[3]);  //3

输出结果是不是出乎意料，这是因为函数闭包的问题，虽然在test()函数执行时，将show方法声明了3次，并未执行，最后返回的是show方法的函数名，只是返回函数的引用，所以t只是函数的引用，如下：

var t = test();
t = function (){
    a[i] = i;
}

又因为，show()方法被暴露出去，还引用着i，所以i不能被回收，当执行t方法时，相当于给a[i] = i赋值，此时的i已经为3，所以最后只输出a[3] = 3;

---

其实说到底，闭包的本质就是函数作用域的问题，只要明白作用域与作用域链，闭包就很好理解了。