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>