【javascript】javascript中的闭包

zccst整理 

总结： 
1，闭包是什么 
闭包 

2，闭包好处： 
(1）希望一个变量长期驻扎在内存中。 
(2）避免全局变量的污染。 
(3）私有成员的存在 

3，怎么用 
模块化代码 
例子 
在循环中直接找到对应元素的索引 
例子 

4，可能存在的问题 
内存泄露。外部变量与内部变量互相引用。导致内存越来越大。 

解决办法： 
1，及时释放dom结点对象。 




闭包 
定义：函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回。 

Js代码  

1. function aaa(){  
2.   var a = 5;  
3.   function bbb(){  
4.     alert(a);  
5.   }  
6.   return bbb;  
7. }  
8. var c = aaa();  
9. c();//5  
10. c();//5  

结论：变量一直存在。由于其参数和变量由于被内部函数使用，所以不会被收回。 


垃圾回收机制 

Js代码  

1. function aaa(){  
2.   var a = 12;  
3.   a++;  
4.   alert(a);  
5. }  
6. aaa();//13  即函数执行完之后，局部变量被回收。  
7. aaa();//13  再次调用时，重新赋值。  
8.   
9. alert(a);//a未定义，即离开作用域后，局部变量已被回收（外部不能访问）。  
10.   
11.   
12. var a = 12;  
13. function aaa(){  
14.   a++;  
15.   alert(a);  
16. }  
17. aaa();  
18. aaa();  
19. //问题是：污染了全局变量。如果连续调用aaa();则变量a的值会递增。  

而我们既想使用局部变量，又想像全局变量一样累加（即闭包），则可如下所示： 

Js代码  

1. //第一版：  
2. function aaa(){  
3.   var a = 1;  
4.   return function(){  
5.     a++;  
6.     alert(a);  
7.   }  
8. }  
9. var b = aaa();  
10. b();//2  
11. b();//3  
12.   
13. //第二版：把函数声明改写为函数表达式  
14. var aaa = (function(){  
15.   var a = 1;  
16.   return function(){  
17.     a++;  
18.     alert(a);  
19.   }  
20. })();  
21.   
22. aaa();  
23. aaa();  

更进一步，把函数变私有，，即模块化代码。 

Js代码  

1. var aaa = (function(){  
2.   var a = 1;  
3.   function bbb(){  
4.     a++;  
5.     alert(a);  
6.   }  
7.   function ccc(){  
8.     a++;  
9.     alert(a);  
10.   }  
11.   return { //json格式  
12.     b:bbb,  
13.     c:ccc  
14.   }  
15. })();  
16.   
17. aaa.b();//2  
18. aaa.c();//3  a对于两个函数，相当于全局。  
19.   
20.   
21. alert(a);  //异常，未定义  
22. alert(bbb);//异常，未定义  
23. alert(ccc);//异常，未定义  

在循环中直接找到对应元素的索引 

Js代码  

1. window.onload = function(){  
2.     var aLi = document.getElementsByTagName("li");  
3.       
4.     //方式一：有问题  
5.     for (var i = 0; i < aLi.length; i++){  
6.         aLi[i].onclick = function(){  
7.             alert(i);  
8.         };  
9.         //问题：for循环后，i已经是4，所以所有li的click都是4。  
10.     }  
11.       
12.     //方式二：  
13.     for (var i = 0; i < aLi.length; i++){  
14.         (function(i){  
15.             //内部函数可以使用外包函数的参数和变量。  
16.             //外包函数执行完毕后，内部函数依然存在。  
17.             aLi[i].onclick = function(){alert(i);}  
18.         })(i);  
19.     }  
20.       
21.     //方式三：  
22.     for (var i = 0; i < aLi.length; i++){  
23.         aLi[i].onclick = (function(i){  
24.             //内部函数可以使用外包函数的参数和变量。  
25.             //外包函数执行完毕后，内部函数依然存在。  
26.             return function(){  
27.                 alert(i);  
28.             }  
29.         })(i);  
30.     }  
31.       
32. };  
33. <ul>  
34. <li>1111111111111</li>  
35. <li>1111111111111</li>  
36. <li>1111111111111</li>  
37. <li>1111111111111</li>  
38. </ul>  

IE下引发内存泄露 

Js代码  

1. window.onload = function(){  
2.   var oDiv = document.getElementById("div1");  
3.   oDiv.onclick = function(){  
4.     alert(oDiv.id);  
5.   }  
6.   
7.   //方法一：  
8.   window.unonload = function(){  
9.     oDiv.onclick = null;  
10.   }  
11. }  
12.   
13.  //方法二：  
14. window.onload = function(){  
15.   var oDiv = document.getElementById("div1");  
16.   var id = oDiv.id;//然后在内部函数中使用id，而不是oDiv即可解决  
17.   oDiv.onclick = function(){  
18.     alert(oDiv.id);  
19.   }  
20.   oDiv = null;  
21. }