<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> //1:什么是闭包? 函数嵌套函数，内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回。 function aaa(a) { var b=5 function bbb() { alert(a); alert(b) } } aaa(); //执行完毕后变量a,b不会被垃圾回收机制收回 //js中的垃圾回收机制 function ccc() { var a=1; } ccc();//执行完毕变量a被垃圾回收机制回收*/ function ddd() { var a=5; function eee() { alert(a); } return eee; } var c=ddd();//执行完毕变量a未被垃圾回收机制回收 c(); //5 变量a还存在 //2:闭包的好处： a:希望一个变量长期驻扎在内存中， b:避免全局变量的污染，c:私有成员的存在。 var a=1; function aaa() { i++; alert(a); } aaa() //2 aaa() //3 alert(a) //因为a是全局变量所以还能找到 //提高性能避免全局变量 function aaa() { var a=1; a++; alert(a); } aaa(); //2 aaa(); //2 调用一次后被回收，所以依然是2 //a是局部变量，同时做到累加，闭包能做到。 function aaa() { var a=1; return function() { a++; alert(a); } } var b=aaa(); b(); //2 b(); //3 alert(a) //报错，因为a是局部变量 //函数声明改为函数表达式， function aaa() //函数声明 { alert(1); } aaa(); ( function aaa() //函数表达式 { alert(1); })(); //自执行 ( function() //函数表达式,可以不需要名字，因为我只需让它执行 { alert(1); })(); //改写上面的闭包 ,叫做模块化代码 var aaa=( function() { var a=1; return function() { a++; alert(a); } } )(); aaa(); //2 aaa(); //3 //私有成员的存在,模块化代码 var aaa=( function() { var a=1; function bbb() { a++; alert(a); } function ccc() { a++; alert(a); } return { b:bbb, c:ccc } } )(); aaa.b(); //2 aaa.c(); //3 //在循环中找到对应的索引 window.onload=function() { var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { aLi[i].onclick=function() { alert(i); //2 点击每个都会弹出2，因为我点击时循环已经结束 } //利用壁包改写 (function(i){ aLi[i].onclick=function() { alert(i) } })(i); //另一种改写 aLi[i].onclick=(function(i){ return function() { alert(i); } })(i); } //3：IE下会引发内存泄漏 var oDiv=document.getElementById('div1'); oDiv.onclick=function() //因为onclick属性引用了function函数， { alert(oDiv.id); //而function内部的oDiv.id又引用了外部的oDiv对象，互相引用，所以会内存泄漏。 } //解决方法一： window.onunload=function() { oDiv.onclick=null; } //解决方法二： var oDiv=document.getElementById('div1'); var id=oDiv.id; oDiv.onclick=function() { alert(id); } oDiv=null; } </script> </head> <body> <div id="div1"></div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>