JavaScript中的闭包并不难理解

一、闭包(Closures)的定义

描述闭包定义之前需要先了解一个学术名词--(free variable)自由变量，网络上的解释是：一些被某个方法使用的变量，且这些变量既不是方法中定义的变量也不是方法的参数。


官方对闭包的描述也是非常的简单，就一句话：

闭包是使用自由变量的方法。

1.1 如何创建一个闭包

根据闭包的定义，相信很难有人能一下子理解它的含义，下面就使用代码来说明：

function a() {
    var n = 1;
    function b() {
        console.log(n++);
    }
}

观察以上代码可以发现以下特点：

• 方法a中内嵌了方法b
• 方法b使用了方法a中的变量

其实当JavaScript解释器执行完这段代码时，并没有产生闭包，为什么呢？虽然我们可以看到方法b使用外部的变量n，但是此时a中的逻辑并没有执行，不管是n还是b，这些只是方法a的描述信息而已，此时JavaScript环境中并没有方法b存在。那何时才能产生闭包呢，答案是：当JavaScript解释器定义方法b的时候。当我们执行a();时，a中的语句得以执行，首先创建了变量n，然后定义了方法b，而定义方法b时需要外部的变量n，此时才符合闭包定义的描述，这时方法b才是一个闭包。

二、闭包的应用

2.1 面向对象的思维

由上例可以看出，一个闭包由两部分组成：自由变量和使用自由变量的方法；面向对象的基本元素就是对象，对象含有属性和方法；当我们把闭包看做一个对象时，自由变量就是属性，而使用自有变量的方法就是方法；由于单一的闭包指的是使用自由变量的方法，终归还是一个方法，所以这种对象本质还是一个方法。

比如有这样一个需求：小明今年10岁，小王今年20岁，小李今年30岁，请问5年后，他们分别多少岁？使用面向对象的思想编写代码如下：

// 从闭包的角度看，这里我们相当于定义了一个类，它的属性是：name，方法是：future()
function man(name, age) {
    function future() {
        console.log(name + "未来的年龄:" + (age + 5));
    }
    return future;
};

// 创建三个对象
// xiaomingObj对象的属性：name = "xiaoming"，方法：future()
var xiaomingObj = man("xiaoming", 10);
// 打印：xiaoming未来的年龄:15
xiaomingObj();

// xiaowangObj 对象的属性：name = "xiaowang"；方法：future()
var xiaowangObj = man("xiaowang", 20);
// 打印：xiaowang未来的年龄:15
xiaowangObj();

// xiaoliObj对象的属性：name = "xiaoli"；方法：future()
var xiaoliObj = man("xiaoli", 30);
// 打印：xiaoli未来的年龄:15
xiaoliObj();

2.2 封装私有变量和方法

这是闭包最重要的用途了，因为闭包使用的自由变量对外部不可见，所以可以起到私有化的作用，只向外提供必要的接口，封装内部逻辑。正是因为有了闭包，才为JavaScript的模块化编程奠定了基础。

封装私有变量和方法示例：

var human = (function() {
    // 私有变量
    var name = "林";

    // 私有方法
    var think = function() {
        // 心想还是让别人叫我小林吧
        return "小" + name;
    };

    // 提供的外部接口
    return {
        speak : function() {
            console.log("你好，可以叫我" + think());
        }
    };
})();

// 打印：你好，可以叫我小林
human.speak();

代码说明：

外层是一个匿名方法：function(){...}，通过立即执行的方式（用括号包裹起来作为方法表达式，并使用()立即执行）创建了一个闭包：speak及其引用的think；外部的human无法直接访问name与think，只能访问对外开放的speak，从而达到封装的效果。

三、循环中的误区

对于新手来说，使用闭包经常会犯的一个错误是：在循环中创建闭包。请分析以下代码：

function a() {
    var b = null;
    for (var i = 0; i < 3; i++) {
        if (i === 1) {
            b = function() {
                console.log(i);
            }   
        }
    }
    return b;
}

// 你觉得会打印什么？
a()();

如果你觉得会打印出1，那恭喜你进坑了；说明你还没有完全理解闭包，正确的答案是3，为什么呢？因为执行了a()后，创建的闭包所包含的自由变量是i，当a()执行完毕后，i被更新为3，此时b还没有被调用，当执行a()()时，b才被调用，所以打印出了3。

四、性能考虑

闭包对性能和内存都有相对较高的消耗，除非特殊场景的需要，不要随便使用闭包；闭包相当于通过方法来定义方法，每次创建闭包时都会对方法重新定义；当闭包被外部引用时，由于闭包内的自由变量无法释放，也会导致内存无法释放。