<!doctype html> <html> <head> <meta charset="utf-8"> <title>时生闭包的学习,教程来自妙味课堂</title> <script> //------------------------------------------------------------------------------------------- //1.什么是闭包 //函数嵌套函数,内部函数可以引用外部函数的参数和变量,变量和参数不会被垃圾回收机制所收回 /* function aaa(a){ var b = 5; function bbb(){ console.log(a); //a,b可以访问到,并不会被垃圾回收机制回收 console.log(b); } } aaa(); */ /*JS中的垃圾回收机制 function aaa(){ var a = 1; } 这个函数执行完,这个变量a就会被回收机制回收了。*/ //测试 /* function aaa(){ var a = 5; function bbb(){ console.log(a); } return bbb; } var c = aaa(); c();//c = bbb(); 弹出5 */ //------------------------------------------------------------------------------------------- /* 2.闭包的好处 1)希望一个变量长期驻扎在内存中 2)避免全局变量的污染 3)私有成员的存在 */ //用法1.模块化代码 //用法2.在循环中直接找到对应元素的索引 /*var a = 1; function aaa(){ a++; alert(a); } aaa(); //2 aaa(); //3 alert(a);//在函数外可以调用。*/ /*function aaa(){ var a = 1; //局部变量 a++; alert(a); } aaa(); //2 aaa(); //2 每次都重新执行了 */ /*function aaa(){ var a = 1; return function(){ a++; alert(a); } } var c = aaa(); c(); //2 c(); //3*/ //alert(a); //a is not defined //用法1.模块化代码 /* (function(){}) //函数表达式 (function(){})() //调用*/ /* var aaa = (function(){ var a = 1; return function(){ a++; alert(a); } })()//模块化代码,避免全局变量的污染 aaa(); aaa();*/ /* 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); //没有找到 is not defined alert(bbb); //没有找到 is not defined alert(ccc); //没有找到 is not defined */ //用法2.在循环中直接找到对应元素的索引 window.onload = function(){ var _li = document.getElementsByTagName("li"); /*for(var i = 0 ; i < _li.length ; i++){ //循环执行结束制还没执行onclick _li[i].onclick = function(){ alert(i); //点击都为3 } }*/ //写法一 /* for(var i = 0 ; i < _li.length ; i++){ (function(i){ //利用闭包将i作为参数传进来 _li[i].onclick = function(){ alert(i); // 0,1,2 } })(i) } */ //写法二 /* for(var i = 0 ; i < _li.length ; i++){ _li[i].onclick = (function(i){ return function(){ alert(i); // 0,1,2 } })(i) } */ //-------------------------------------------------------------------------------- //3.使用闭包需要注意什么? //闭包在IE下容易引发内存泄漏 //内存泄漏会导致页面跳转时变量还没释放导致CPU一直增加,只有关闭浏览器才会释放。 //引发原因 //当一个变量(oDiv)是DOM节点或数组对象的时候,他的一个属性(oDiv.onclick)去引用一个内部函数,而内部函数里的变量又去引用外部的(oDiv.id) var oDiv = document.getElementById('div1'); oDiv.onclick = function(){ alert(oDiv.id); }; //解决方法1. 变量属性为NULL; window.onunload = function(){ oDiv.onclick = null; } //解决方法2.将对象为NULL; var oDiv = document.getElementById('div1'); var id = oDiv.id; oDiv.onclick = function(){ alert(id); }; oDiv = null; } </script> </head> <body> <ul id="myul"> <li>11111</li> <li>22222</li> <li>33333</li> </ul> <div id="div1">aaaa</div> </body> </html>
转载于:https://www.cnblogs.com/-gap/archive/2012/09/08/2676666.html