js 闭包概念,用法
1.闭包概念【IE下可能会引起内存泄漏】
(1)我们常说的闭包就是函数嵌套函数,内部函数可以引用外部函数的参数和变量 【代码如下】
(2)会涉及到js中的垃圾回收机制(指:当函数执行完时,函数的变量将会收回,闭包就不一样了) 【代码如下】
(3)闭包中当外部函数加载完时,外部函数的变量内部函数还可以继续使用,不会回收 【代码如下】
(4)闭包的好处
①将一个变量长期驻扎在内存中 【代码如下】
②避免全局变量对函数的污染 【代码如下】
③私有成员的存在 【代码如下】
(5)闭包的用法 【代码如下】
①模块化代码 【代码如下】
②在循环中直接找到对应元素的索引 【代码如下】
2.代码如下
(1) or example (1)
<script>
//闭包中的函数 function one(name){ //外部函数 var name="ruanjiang"; function two(){ //内部函数 alert(name); } return two; } var c = one(); //one函数以及执行完毕,c代表two这个函数 c(); </script>
输出: ruanjiang
(2) or example
//js中正常函数 function one(){ var name="ruanjiang"; alert(name) } one();//输出ruanjiang function two(){ alert(name); } two();//输出为空
(3) for example (1)(2)(3)(4)①②
//js原全局变量的污染 var a=1;//为全局变量 function one(){ a++; alert(a); } one(); //、2 one(); //3 alert(a);//函数外部可引用a
//垃圾回收机制 function one1(){ var a =1; a++; alert(a); } one1(); //、2 one1(); //、2 //闭包 function one2(){ var a= 1; return function(){ a++; alert(a); } } var b =one2(); b(); //2 b(); ///3 alert(a);//a为空 表示a为局部变量
(4) for example (4)③ (5)①
//函数声明函数diaoyong function one(){ alert("我是声明函数"); } one(); //函数表达式 (function one1(){ alert("我是函数表达式"); })(); //模块化代码 var one2=(function (){ var a=1; return function(){ a+=2; alert(a); } })(); one2(); //3 one2(); //5 //私有成员 方法函数 var one3=(function(){ var a =1; function bbb(){//私有成员 a++; alert(a); } function aaa(){ //私有成员 a+=5; alert(a); } return{//返回json数据 b :bbb, c :aaa } })(); one3.b(); //2 one3.c(); //7 //alert(a); not defind //alert(bbb); not defind //alert(ccc); not defind
(5)for example (5)②
方法一
<script> window.onload = function(){ var oLi = document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ (function(i){ //循环变量的i,已经存入内存,读取 oLi[i].onclick = function(){ alert("这是一楼"+i); } })(i); } } </script> </head> <body> <ul> <li>这是你的一楼爸爸</li> <li>这是你的二楼爸爸</li> <li>这是你的三楼爸爸</li> </ul> </body>
输出结果:点击点一个li输出这是一楼0,点击第二个li输出这是一楼1,以此类推
方法二
window.onload = function(){ var oLi = document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ oLi[i].onclick = (function(i){ //循环遍历的i已经存入内存中 return function(){ alert(i); } })(i); } }
3.ie下闭包引起的内存泄漏
//闭包在ie下可能会引起内存泄漏 //js的对象属性(oDiv.onclick)引诱内部的时候(oDiv.id),内部又应有外部对象,就会引起 window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onclick = function(){ alert(oDiv.id); } } //解决方法一,当window.onload出现时将事件取消 window.onunload = function (){ oDiv.onclick = null; } //方法二 window.onload = function(){ var oDiv = document.getElementById('div1'); var id = oDiv.id; oDiv.onclick = function(){ alert(id); }; oDiv = null; };
①②③④⑤⑥⑦⑧