JavaScript 进阶（四）解密闭包closure

闭包(closure)是什么东西

我面试前端基本都会问一个问题"请描述一下闭包"。相当多的应聘者的反应都是断断续续的词，“子函数”“父函数”“变量”，支支吾吾的说不清楚。我提示说如果你表述不清楚你可以写一小段代码示例一下。这个基本都会，比如这样：

function A() {
    var i = 0;
    return function(){return i++;}
}

看得出来他知道什么叫闭包，但是却又不清楚，只知道这么个写法，但是却又不是足够熟悉。那么本文就来深入探讨一下，闭包到底是个什么东西。

从C语言开始

我又要从C语言开始了。没办法，讲细节就得从C语言开始。刚开始学C语言的时候，教材上面都讲过，变量作用域分两种，全局变量，局部变量。全局变量很好理解，就是程序的全局都可以访问的变量。那局部变量呢？就是在一个子程序内部才可以访问的变量。这句话换一个意思就是，子程序外部将访问不了这个变量。有人说不对，我可以把局部变量返回啊。的确，把局部变量返回就可以在函数的外部来得到局部变量的值了。但事实上，当子函数返回的时候，返回值并不是局部变量本身，而是局部变量的一个拷贝值。我们以一个最简单的例子来描述这个局部变量返回的过程，比如这个子函数：

int calc(int a, int b) {
    int tempA = a * a;
	    int tempB = b * b;
	    int c = tempA + tempB;
    return c;
}
int main() {
    int sum = calc(3, 4);
    return 0;
}

当函数calc调用的时候，main函数将两个参数，3,4压栈，然后进入calc函数。calc函数中用两个局部变量tempA，tempB来保存它们的平方。计算完和之后，将平方和返回给main函数。那么calc返回之后，如何访问tempA，tempB呢？答案是没法访问。calc函数退栈之后，这俩局部变量销毁了。局部变量的生命周期就是在他所在的子函数执行的时候存在，执行完成之后就销毁，赤裸裸的兔死狗烹。所以局部变量经常被叫做临时变量，这确实名副其实。

好，讲那么一大堆，那么和今天的主角闭包有什么关系呢？我讲这个例子，目的就是强调一点， 局部变量都在栈中，在函数返回之后退栈，退栈之后局部变量通通销毁。

下面再讲一个概念就是上下文。对于一个函数的上下文就是这个函数能够访问的变量。比如calc函数，它的上下文就是全局变量(例子里面没有，但明显它是可以访问的)，还有局部变量，就是传入参数加上函数内部声明的变量。这个函数就只能接触这些东西，这些东西的集合就是上下文。所以很明显一个函数是离不开上下文的。

再来讲闭包

回到本文一开始的那个JS函数，当这个函数被调用，比如var func = A(). 那么此时func就是A返回的一个函数。如果套用刚才讲的，A返回之后退栈，局部变量销毁，那么i变量就没有了。但事实上，func这个函数是可以调用的，反复调用就返回一个递增序列。递增所用的那个计数器变量，就是i，它没有被销毁，看起来这个函数的调用过程好像和C里面的不一样啊。C函数中，一个子程序的上下文就是栈中的局部变量（解释的时候方便起见，全局变量就不讲了，因为这个容易理解，并且C和JS在全局变量方面很相似），没有其他的东西了，退栈之后这些东西也就销毁了。但是JS函数的上下文除了局部变量之外，还有一个东西就是闭包。下面的图描述了一个有闭包的JS函数的上下文。

被调用的函数除了能够访问自己的局部变量var1,var2,它还有一个指针，顺着这个指针指向的内容就是他的父函数的局部变量空间。尽管此时它的父函数已经退栈了，由于子函数还存在，这个存在可能是被返回，或者是被赋值给了一个全局变量，父函数的局部变量就会被复制到堆中，在堆中保存了一个仅供子函数访问的一个上下文。所以这个时候子函数的上下文就是局部变量+父函数的局部变量。

所以说白了，闭包就一个供子函数访问的上下文，一组父函数的局部变量而已。

闭包的特性

首先，闭包中的变量只有子函数才能访问，其他的没有任何手段可以访问。所以使用这个特性可以制造一个安全的空间来保存一些变量。比如文章最初的JS例子，将计数器放到了闭包之中，这个i绝对没有其他的手段访问，用这种手段可以确保i不会被恶意修改，使得它能够安全的返回一个递增序列。此外这个特性还可以在大型项目中保证全局名空间不被污染，让多个模块可以安全的协作。比如两个项目组分别开发两个JS的库函数，这个库函数中包括了很多的函数和变量。那么代码就会变成这样：>

//modue1
var m1,m2,m3;
function foo1(){...}
function foo2(){...}


//module2
var s1,s2,s3;
function sb1(){...}
function sb2(){...}

代码中引入了这个两个JS文件module1和module2.如果变量，函数较多，万一出现重名了，别的模块的变量就会被莫名其妙的修改，那么一些匪夷所思的bug就会出来。为了避免重名，当然可以规定前缀，命名规范等等，但是这治标不治本。让开发人员麻烦不说，当模块变多，维护这种规范的难度就会明显上升。结合刚才的闭包的特性，所以我们可以吧代码改成这样：

//modue1
function module1(){
var m1,m2,m3;
function foo1(){...}
function foo2(){...}
return{
"foo1":foo1,
"foo2":foo2
}
}
//module2
function module2(){
var s1,s2,s3;
function sb1(){...}
function sb2(){...}
return{
"sb1":sb1,
"sb2":sb2
}
}

当使用一个模块的时候，调用这个模块对应的函数即可，顶层的名空间就是模块的名字，这样维护起来就会方便很多。当然，大型项目中的多模块协作用闭包是一个手段，还有一个手段就是面向对象，这个我以后的文章会讲到。

闭包的另外一个容易忽略的特性就是一个闭包内的变量会被这个闭包对应的所有子函数共享。说起来有点拗口，我们来举个例子：

function test() {
    var array = [];
    for(var i = 0; i < 10; i++) {
        array[i] = function(){return i;}
    }
    return array;
}

这段代码返回了一个数组，数组里面的每一个元素都是一个函数。那么有下面的测试代码：

var a = test();
a[0](); //返回几？

看起来它应该返回0啊。这个函数产生的时候i = 0。这就错了，事实上这个函数会返回10，并且这个数组里面所有的函数都返回10.为什么呢？刚才有提到，数组中的所有的函数共享一个闭包，就是test函数的局部变量i。当test执行完成之后，i是几呢？当然是10.所以数组中的函数就都返回10了。这个特性经常被刚接触闭包的程序员忽视。当制造闭包的函数中有循环，条件语句的时候，经常会出现错误。这个要小心了。

此外，闭包是可以嵌套的。相信如果你前面的内容看懂了的话，理解嵌套闭包就是易如反掌了，在此我不做赘述。

结束

扯了那么多，以一言蔽之，闭包是什么？闭包就是父函数返回时候，复制到堆中的供子函数使用的上下文。