深入理解闭包

来源：互联网发布：电信端口扩容10天解决编辑：程序博客网时间：2024/05/16 00:44

深入了解闭包：
1、什么是闭包：函数嵌套函数
2、闭包特点：函数嵌套函数；内部函数可以引用外部函数的参数和
变量，变量长期驻留在内存；防止全局变量的污染；私有成员的存在
3、闭包例子：
function aaa(a){
var b=5;
function bbb(){
alert(a);
alert(b);
}
return bbb;
}
var c=aaa();//调用函数aaa，变量a、b不会被垃圾回收器收回（因

内部函数引用着外部的参数a和变量b
c();//函数bbb被调用
4、垃圾回收机制
function aaa(){
var b=3;
alert(b);
}
aaa();//函数aaa被调用执行，变量b不再被引用，将被回收
5、将函数的声明改写成函数表达式
一般的函数声明和调用：
function aaa(){ //声明部分
var b=1;
alert(b);
}
aaa();//函数调用
将函数声明放在一对括号里面就是函数表达式，后边再加一对括号就

是对函数的调用
(function(){
var b=1;
alert(b);
})();
例子：
var aaa=(function(){ //又把这样的代码叫作模块化代码
var a=1;
return function(){
a++;
alert(a);
})();
aaa();//2
aaa();//3 体现了变量长期贮存在内存，同时也防止了全局变量的

污染此时a是一个局部变量
又一例：
var aaa=(function(){
var a=1;
function bbb(){
a++;
alert(a);
}
function ccc(){
a++;
alert(a);
}
return{
b:bbb,
c:ccc
}
})();
aaa.b();
aaa.c();
//alert(a);a是局部的不能被访问
//alert(bbb);bbb是私有方法不能被访问
6、闭包在循环中的应用
<html>
<head>
<title>a test for selection object</title>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName('li');

for(var i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
alert(i);
};
}
};
</script>
</head>
<body>
<li>111</li>
<li>222</li>
<li>333</li>
</body>
</html>
以上代码，在页面加载完毕的时候，无论点击哪个无序列表都将弹出

3，因为我们发出点击动作的时候循环已经执行完毕。
用闭包改写：
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName

('li');

for(var i=0;i<oLi.length;i++){
(function(i){ //内部函

数的执行不受外部函数执行完毕的影响
oLi[i].onclick=function(){
alert(i);
};
})(i);
}
};
</script>
</head>
<body>
<li>111</li>
<li>222</li>
<li>333</li>
</body>
</html>
//另外一种写法
for(var i=0;i<oLi.length;i++){
oLi[i].onclick=(function(i){return

function(){alert(i);}})(i);
}
};
7、使用闭包的时候要注意的方面
内存泄漏：当一个变量是由获取dom节点或是数组对象取得，变量的

属性引用内部函数，而在内部函数中又有对象取得对象属性的代码，

在ie下会产生内存泄漏
解决办法一：
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onclick=function(){
alert(oDiv.id);
};
window.onunload=function(){
oDiv.onclick=null;
};
};
</script>
</head>
<body>
<div id='div1'>aaa</div>
</body>
</html>
解决办法二：
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var id=oDiv.id;
oDiv.onclick=function(){
alert(id);
};
oDiv=null;
};
</script>
</head>
<body>
<div id='div1'>aaa</div>
</body>
</html>