JS闭包
2017-04-07 本文已影响48人
7天苹果
闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。
闭包的三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
使用闭包的好处：
1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在
闭包实例
1、
function aaa() {
var a = 1;
return function(){
alert(a++)
};
}
var fun = aaa();
fun();
结果是这样的：
闭包访问局部变量
调用了函数fun()之后，可以访问到aaa()的局部变量a。
2、
var abc = (function(){ //abc为外部匿名函数的返回值
var a = 1;
return function(){
a++;
alert(a);
}
})();
abc(); //2 ；调用一次abc函数，其实是调用里面内部函数的返回值
abc(); //3
在js中我们可以使用关键字function声明函数，我们也可以将它写成表达式的形式，然后通过“()“调用函数表达式。
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
在这个闭包中，将函数作为对象进行局部变量的访问，而且一个闭包中写了多个函数。
4、
<html>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
var nodes = document.getElementsByTagName('div');
for(var i = 0, len = nodes.length; i < len; i++){
nodes[i].onclick = function(){
alert(i);
}
};
</script>
</body>
</html>
发现无论点击那个div,最后弹出的结果都是5.这是因为div节点的onclick事件是被异步触发的，当事件被触发的时候，for循环早已经结束，所以i变量的值已经是5，在后续onclick事件查找时肯定就是5。
下面用闭包解决这个问题：
for(var i = 0, len = nodes.length; i < len; i++){
(function(i){
nodes[i].onclick = function(){
console.log(i);
}
})(i)
};
这样的输出就如我们所愿。
闭包实现
