JavaScript中的闭包

闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。这看似简单的一句话，总会让一些人摸不着头脑。首先让我们看一个简单的关于闭包的例子，通过例子我们慢慢解开闭包的面纱。

function exampleClosureForm(arg1, arg2){
    var localVar = 8;
    function exampleReturned(innerArg){
        return ((arg1 + arg2)/(innerArg + localVar));
    }
    /* 返回一个定义为 exampleReturned 的内部函数的引用*/
    return exampleReturned;    //引用
}

var globalVar = exampleClosureForm(2, 4);    //调用

 

请看代码的最后一句，变量globalVar调用了函数ExampleClosureForm(2, 4)，而此函数的返回值是函数exampleReturned的引用。这个例子完全符合闭包的概念，所以她构成了闭包。

注意

这里我们提到了两个概念，也是很多学JS的朋友容易混淆的两个概念。他们是调用与引用。调用返回的是函数执行后的值，而引用返回的是函数本身。在书写时的区别是，调用带()而引用是不带()的。

  

闭包是构成了，那么我们为什么要讲闭包，甚至有些招聘信息上的要求就明确的写有一句“对闭包有深刻理解”这样的字眼。她到底有什么样的威力，需要如此的重视她呢？你是否似乎又在哪里听说或者看到过“闭包什么都能做”这样的话语？现在你是否很疑惑，闭包的概念就这么简单，能有什么威力呢？？？为了解开这些疑惑，我们继续深入研究这个例子，看是否能找到答案。

 

仔细看一遍上面的代码，你是否发现内部函数exampleReturned（也就是被返回的函数）中所使用的三个变量都未在此函数内部中声明。或许你会说，这有什么奇怪的，她的外部函数exampleClosureForm中有声明啊，这是JavaScript的特性啊！的确，JavaScript中对变量的作用域没有严格的要求，并且可以不声明直接使用（此时的变量会被自动定义为全局变量）。在JavaScript中，会对函数内没有定义的变量沿着作用域链往回找，直到全局执行环境（如果到了全局执行环境还未找到，就会自动定义一个全局变量）。继续看例子，arg1,arg2,localVar这三个变量时在外部函数exampleClosureForm中定义的，在内部函数exampleReturned中能正常使用。

 

讲到这里，我们不得不提一下，JavaScript对垃圾的收集机制——ECMAScript 要求使用自动垃圾收集机制。也就是说在对象（在JavaScript中，一切都是对象）无用的时候进行销毁和释放内存。换言之，只要这个对象还有用就不会被销毁。接下来我们继续看例子，根据垃圾收集机制，代码执行了var globalVar = exampleClosureForm(2, 4);以后，对象exampleClosureForm（function也是对象）并不会被销毁。因为globalVar（其实就是exampleReturned的引用）还存在，exampleReturned中用到的三个变量（在exampleClosureForm中声明的arg1，arg2，localVar）还不能被销毁，所以exampleClosureForm还有用，不能被销毁，只有当exampleReturned被销毁后，exampleClosureForm才能被销毁。

 

好了，万事俱备，只欠东风了！前面的概念性的说明，都是为了真正理解闭包做准备得，这些也是JavaScript中存在闭包的条件。现在我们来执行下globalVar(4)吧，返回值为0.5，我想对于这样的结果没有任何有意见吧？！有兴趣的朋友可以去执行输出结果，体验一下。前面说了那么多，还没给大家多少惊喜，现在差不多是该给惊喜的时候了。

 

如果再次调用 exampleClosureForm 函数，如：

var secondGlobalVar = exampleClosureForm(12, 3);

 

调用以后产生了一个全新的闭包，或许您暂时还无法理解这句话。其实这有点类似于对象的实例化，每个实例都是全新的，我想这样应该更容易理解。聪明如你，是否已经嗅到点什么了？是的，当你执行secondGlobalVar(n)的时候和globalVar(n)一点都不冲突，的确这个跟对象的实例化像极了。有实话是可意会而不可言表的，所以就写到这了——嘿嘿，我也玩下深层。如果这些文字看了几遍还是不明白的话，那就看下http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.html#clScCh这篇吧，他讲得很详细。不过我还是建议把我这段文字看得有点理解了后再去细读那篇文章，因为那篇文章真的有点长，而且稍微有点点绕口。当然这个是我个人觉得，要是有不同建议和意见的朋友，也欢迎提出来！

 

顺便说下，下回我把我前段时间写的多层弹窗效果的代码贴出来给大家，那里面便使用了闭包。届时可以更深刻的体会下闭包的魅力！