Javascript学习笔记——闭包
闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量;参数和变量不会被垃圾回收机制所收回
好处:1.变量可以长期驻扎在内存当中;2.避免全局变量的污染;3.私有成员的存在
示例1:
function aaa(){ var a=1; return function(){ a++; alert(a); } } var b=aaa(); b();//2 b();//3 alert(a);//报错,因为a是局部变量
示例2:改写示例一,实现代码模块化
var aaa=(function(){ var a=1; return function(){ a++; alert(a); } })(); aaa();//2 aaa();//3 alert(a);//报错,因为a是局部变量
示例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 alert(a);//报错 alert(bbb);//报错 alert(ccc);//报错
用法:1.模块化代码;2.在循环中直接找到对应元素的索引
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>闭包</title> <script type="text/javascript" src="bibao.js"></script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <div id="div1"></div> </body> </html>
bibao.js代码如下
示例4:
window.onload=function(){ var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].onclick=function(){ alert(i);//alert的i都是i的length,因为onclick未执行时,for循环已结束 } } }
示例5:改写示例4,使得实现用法2:方法一
window.onload=function(){ var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ (function(i){ aLi[i].onclick=function(){ alert(i); } })(i); } }
示例6:改写示例4,使得实现用法2:方法二
window.onload=function(){ var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].onclick=(function(i){ return function(){alert(i);} })(i); } }
注意:使用闭包,IE下会发生内存泄漏
示例7:
window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onclick=function(){ alert(oDiv.id);//相互引用,IE下引发内存泄露 }; //方法一 window.onunload=function(){ oDiv.onclick=null; }; }
示例8:
window.onload=function(){ var oDiv=document.getElementById('div1'); //方法二 var id=oDiv.id; oDiv.onclick=function(){ alert(id); }; oDiv=null; }