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

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

1、变量的做用域

　　要理解闭包，首先必须理解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));

运行结果：

　　

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

　　出于种种缘由，咱们有时候须要获得函数内的局部变量。可是，前面已经说过了，正常状况下，这是办不到的，只有经过变通方法才能实现。

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

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函数

运行结果：

　　

3、闭包的概念

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

4、闭包的用途

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

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

 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，能够在函数外部对函数内部的局部变量进行操做。

 5、使用闭包的注意点

　　1）因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。

　　2）闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。

6、思考题

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

代码片断一：

 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闭包的总结，若是有写得不对的地方，欢迎朋友们指出来，你们一块儿共同进步！