JavaScript学习总结(十六)——Javascript闭包（Closure）

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

一、变量的作用域

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

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

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

1 var n=999;//定义全局变量n
2 function f1(){
3 　　alert("在函数内部访问全局变量n，n="+n);//在函数内部访问全局变量n
4 }
5 f1(); // 999

运行结果：

　　　　

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

1  function f1(){
2  　　var n=999;//在f1函数内部定义局部变量n
3  }
4  alert("在函数外部访问局部变量n，n="+n); //在函数外部访问局部变量n，错误：n未定义

运行结果：

　　

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

1 function f1(){
2 　　n=999;
3 }
4 f1();
5 alert("n在f1函数内部没有使用var来声明，此时n就是一个全局变量，\r\n证明：n="+n+"，window.n==n的结果是："+(window.n==n));

运行结果：

　　

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

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

那就是在函数的内部，再定义一个函数。

1 function f1(){
2 　　var n=999;//f1函数内部的局部变量n
3     //在f1函数内部定义一个f2函数
4 　　function f2(){
5        //在f2函数内部是可以访问局部变量n的
6 　　　　alert(n); // 999
7 　　}
8 }

　　在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！或许有人会有疑问，f2是一个函数啊，怎么能够作为f1函数的返回值返回呢，其实是可以的，JavaScript中的函数名本身就是变量，所以函数也可以当作普通变量来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的返回值返回。

 1 function f1(){
 2 　　　　var n=999;//局部变量n
 3     //在f1函数内部声明的f2函数
 4 　　　　function f2(){
 5 　　　　　　alert(n);
 6 　　　　}
 7 
 8 　　　　return f2;//将f2函数作为f1函数的返回值
 9 　　}
10 　　var result=f1();//f1调用完后的返回值是一个f2函数，此时result就是f2函数
11 　　result(); // 999，调用f2函数

运行结果：

　　

三、闭包的概念

　　上一节代码中的f2函数，就是闭包。各种专业文献上的"闭包"（closure）定义非常抽象，比如有这样的一个闭包定义："JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量，而这些变量是不会随上一级函数的执行完成而销毁"，对于这样的闭包定义，我是很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

　　闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

 1     function f1(){
 2 　　　　var n=999;
 3         //nAdd是一个没有使用var声明的全局变量，这个变量现在指向了在f1函数内部声明的一个匿名函数
 4 　　　　nAdd=function(){n+=1}
 5 　　　　function f2(){
 6 　　　　　　alert(n);
 7 　　　　}
 8 　　　　return f2;
 9 　　}
10 
11 　　var result=f1();//result就是f2函数
12 　　result();//第一次调用result函数 999
13 　　nAdd();//nAdd代表的就是在f1函数内部声明的一个匿名函数，nAdd()就是在调用匿名函数
14 　　result();//第二次调用result函数 1000

运行结果：

　　

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

　　为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

　　这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

 五、使用闭包的注意点

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

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

六、思考题

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

代码片段一：

 1 var name = "The Window";
 2 　　var object = {
 3 　　　　name : "My Object",
 4 　　　　getNameFunc : function(){
 5 　　　　　　return function(){
 6 　　　　　　　　return this.name;
 7 　　　　　　};
 8 　　　　}
 9 　　};
10 　　alert(object.getNameFunc()());

运行结果：

　　

代码片段二：

 1 var name = "The Window";
 2 　　var object = {
 3 　　　　name : "My Object",
 4 　　　　getNameFunc : function(){
 5 　　　　　　var that = this;
 6 　　　　　　return function(){
 7 　　　　　　　　return that.name;
 8 　　　　　　};
 9 　　　　}
10 　　};
11 　　alert(object.getNameFunc()()); 

运行结果：

　　

下面给代码加上注释，分析上述两个代码片段的运行结果：

代码片段一：

分析如下：

 1     /*
 2     在JavaScript中，我们声明的JavaScript全局对象、全局函数以及全局变量均自动成为window对象的成员。
 3     全局变量是window对象的属性。
 4     全局函数是window对象的方法。
 5     */
 6     var name = "The Window";//声明一个全局变量name，此时这个全局变量name就自动成为了window对象的一个属性
 7     //证明：
 8     alert("window.name："+window.name);//能用window.name(对象名.属性名)的形式去访问name，那么就证明了这个全局变量name就自动成为了window对象的一个属性
 9     //声明全局对象object，此时这个全局变量object就自动成为了window对象的一个属性
10     var object = {
11         　name : "My Object",//object对象的属性name
12     　　　　getNameFunc : function(){//object对象的getNameFunc函数
13                 //object对象的getNameFunc方法的返回值是一个匿名函数
14     　　　　　　return function(){
15                     //此时这个this指的是哪个对象呢，指的是window对象，哪个对象调用this所在的函数，this指的就是哪个对象。
16                     //证明匿名函数里面的this代表的是window对象而不是object
17                     alert("this==object的结果是："+(this==object));
18                     alert("this==window的结果是："+(this==window));
19     　　　　　　　　return this.name;//既然this代表的是window对象，那么this.name访问的自然就是window对象的名字"The Window"
20     　　　　　　};
21     　　　　}
22     };
23     //证明：全局对象object是window对象的一个属性
24     alert("window.object："+window.object);
25     alert("window.object.name："+window.object.name);
26     /*
27     调用完getNameFunc方法后，返回一个匿名方法，
28     此时retFn代表的就是匿名方法，现在相当于给匿名方法起了一个名字叫retFn，
29     此时的retFn函数自动成为了window对象的一个函数
30     */
31     var retFn = object.getNameFunc();
32     alert(retFn());//调用返回的匿名方法，那么是谁在调用这个匿名方法呢？是window对象
33     //证明：retFn函数是window对象的一个函数
34     alert("window.retFn()："+window.retFn());//能用window.retFn()(对象名.方法名)的形式去调用retFn方法，那么就证明了retFn函数是window对象的一个函数

代码片段二：

分析如下：

 1     var name = "The Window";//全局变量name
 2     //全局对象object
 3     var object = {
 4 　　　　name : "My Object",
 5 
 6 　　　　getNameFunc : function(){
 7             /*
 8             此时这个this代表的是哪个对象呢，this此时代表的是object对象，哪个对象调用this所在的函数，this指的就是哪个对象
 9             执行完that = this后，此时that也代表object对象
10             */
11             var that = this;//that是在getNameFunc函数里面声明的一个局部变量
12             //证明getNameFunc函数里面的this代表的是object对象而不是window
13             alert("this==object的结果是："+(this==object));
14             alert("this==window的结果是："+(this==window));
15             //证明that代表的是object对象
16             alert("that==object的结果是："+(that==object));
17 　　　　　　return function(){
18             /*that是在getNameFunc函数里面声明的一个局部变量,
19             正常情况下getNameFunc函数调用完成后，that这个局部变量就会被JavaScript的GC回收，释放掉that这个局部变量所占用的内存空间，
20             但是现在that却能一直正常使用，没有被回收，
21             原因就在于getNameFunc是这个匿名函数的父函数，而getNameFunc函数调用完后会将这个匿名函数返回并被赋给了一个全局变量retFn，这导致匿名函数始终在内存中，
22             而匿名函数的存在依赖于getNameFunc函数，因此getNameFunc函数也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
23             既然getNameFunc函数始终在内存中，那么在getNameFunc函数内部声明的that局部变量在内存中也会一直存在，既然存在，那么当然可以继续使用了。
24             */
25 　　　　　　　　return that.name;//that代表的是object对象，那么that.name访问的自然就是object对象的名字"My Object"
26 　　　　　　};
27 
28 　　　　}
29 
30 　　};
31     var retFn = object.getNameFunc();//调用完getNameFunc方法后，返回一个匿名方法，此时retFn代表的就是匿名方法，现在相当于给匿名方法起了一个名字叫retFn
32 　　alert(retFn()); 

 最后也附上一个我以前学习JavaScript闭包时写的一个例子：

 1 <script type="text/javascript">
 2     function A(){
 3         var i = 0;//声明在A函数内部的局部变量i
 4         //声明在A函数的内部的子函数b
 5         function b(){
 6             alert("i = "+(++i));//在子函数b内部访问声明在A函数内部的局部变量i
 7         }
 8         return b;//返回b这个函数的地址
 9     }
10     /*
11     在执行完var c = A()后，变量c实际上是指向了函数b,b中用到了变量i,
12     再执行c()后会弹出一个窗口显示i的值(第一次为1)，
13     这段代码其实就是创建了一个闭包，
14     因为函数a外的变量c引用了函数a内部的函数b
15     也就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，
16     就创建了一个所谓的"闭包"
17     闭包的作用就是在a执行完并返回后，
18     闭包使得JavaScript的垃圾回收机制GC不会收回a所占用的资源，
19     因为a的内部函数b的执行需要依赖a中的变量
20     */
21     A();//此时内存中肯定会有i的空间，当执行完A()之后，GC就会回收为i分配的内存空间
22     var c = A();//这种用法，GC不会把i当成垃圾处理掉
23     c();//相当于调用b()，结果是：i=1
24     c();//结果是：i=2
25     c();//结果是：i=3
26   </script>

运行结果：

　　

　　以上就是对JavaScript闭包的总结，如果有写得不对的地方，欢迎朋友们指出来，大家一起共同进步！