1 <!doctype html>
2 <html>
3 <head>
4 <title>闭包</title>
5 <meta charset=uft-8>
6 </head>
7 <body>
8 <script>
9 function call(a, b, c){
10
11 return function(){
12 alert(b + c);
13 };
14 }
15
16 // var fun = call(1,2,3);
17
18 //alert(call);
19 //call = null;
20 //alert(call);
21
22 // alert(fun()());
23 main = setTimeout(fun(1,2,3), 1000);
24 // alert(main)
25
26 //闭包的好处1： 保存变量，变量长期保存在内存中
27 //闭包的好处2： 减少全部变量的污染
28 //闭包的好处3： 私有成员的存在
29
30 //闭包的用法1： 代码模块化
31 var aaa = (function(){
32
33 var a = 1;
34
35 function bbb(){
36 a++;
37 alert(a);
38 }
39
40 function ccc(){
41 a++;
42 alert(a);
43 }
44
45 return {
46 b: bbb,
47 c: ccc
48 }
49
50 })();
51
52
53 //闭包的用法2： 在循环中直接找到对应元素的索引
54 window.onload = function(){
55 aLi = document.getElementsByTagName('li');
56
57 for(var i=0; i< aLi.length; i++){
58
59 //解决方案1
60 //(function(i){
61 // aLi[i].onclick = function(){
62 // alert(i);
63 // }
64 //})(i);
65
66 //解决方案2
67 aLi[i].onclick = (function(i){
68 return function (){
69 alert(i);
70 }
71 })(i);
72 }
73 }
74
75 //使用闭包需要注意的地方: IE中容易发生内存泄露的问题，在IE中外部属性和内部对象交叉引用时容易发生内存泄露
76 window.onload = function(){
77 var oDiv = document.getElementById('oDiv');
78 oDiv.onclick = function(){
79 alert(oDiv.id);
80 }
81 }
82
83 //解决方案1
84 window.onunload = function(){
85 oDiv.onclick = null;
86 }
87
88
89 //解决方案2
90 //window.onload = function(){
91 // var oDiv = document.getElementById("oDiv");
92
93 //在外部设置一个变量
94 // var id = oDiv.id;
95
96 // oDiv.onclick = function(){
97 //alert(id);
98 // }
99
100 //还要将oDiv 设置成 null
101 // oDiv = null;
102
103 // }
104 </script>
105
106 <ul>
107 <li>111111111111111111111</li>
108 <li>111111111111111111111</li>
109 <li>111111111111111111111</li>
110 </ul>
111 </body>
112 </html>
