关于闭包

知识点温故而知新

 

提到闭包，我们就会问到这几个问题：

1，什么是闭包，

2，闭包有什么好处？应用在哪里？

3，闭包需要注意的地方？

下面我们就一一来解释这几点。

 

1，概念：函数嵌套函数,内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制所收回。

 

//闭包的写法，，不回收
function aaa(a){
	var b=5;
	function bbb(){
		alert(a);
		alert(b);
	}
}

function aaa(){
	var a = 5;
	function bbb(){
		alert(a);
	}
	return bbb;
}
var c = aaa();
c();//弹出5

//js中的垃圾回收机制
function aaa(){
	var a=1;
}
aaa();//这一步的时候var a=1已经被收回。

2，好处：希望一个变量长期驻扎在内存当中，避免全局变量的污染

var a = 1;
function aaa(){
	a++;
	alert(a);
}
aaa();//2
aaa();//3
或者
alert(a);//1

 局部变量

function aaa(){
	var a = 1;
	a++;
	alert(a);
}
aaa();//2
aaa();//2

 即是局部变量又可以累加：

function aaa(){
	var a = 1;
	return function(){
		a++;
		alert(a);
	}
}
var b = aaa();
b();//2
b();//3
alert(a);//报错找不到a

 

function aaa(){
	alert(1);
}
aaa();//一般的函数申明和调用

(function(){
	alert(1);
})();//函数()() 函数声明变成函数表达式就可以立马执行，调用。。

 

私有成员方法，避免全局函数污染，，模块化代码

var aaa = (function(){
	var a = 1;
	return function(){
		a++;
		alert(a);
	}
})();
aaa();//2
aaa();//3
alert(a);//找不到

 函数怎么变私有的，用法：模块化代码模型

var aaa = (function(){
	var a = 1;
	function bbb(){
		a++;
		alert(a);
	}
	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);//找不到

 用法：在循环中直接找到对应元素的索引，

<ul>
	<li>aaaaaaaa</li>
	<li>bbbbbbbb</li>
	<li>cccccccc</li>
</ul>

 每个li添加点击事件看看获取的索引值

一般可能会写成这样的，，
window.onload = function(){
	var aLi = document.getElementsByTagName("li");
	for(var i=0; i<aLi.length; i++){//这个for循环执行结束的时候才执行onclick所以每次弹出都是3

            aLi[i].onclick = function(){
			alert(i);
	    };

	}
};//点击每一个弹出来都是3.  我们利用闭包来改写。
因为闭包是：内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制所收回。
所以我们可以把012传进去，想用的时候用
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);
		

	}
};

另一种方法
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);
		

	}
};

 3，闭包需要注意的就是ie下会引发内存泄漏：当你页面跳转的时候你的变量不会被释放一直存在你的内存当中，使你的cpu累加，。。只有浏览器关闭的时候才会被释放。

看一下怎么才会内存泄漏

<div id="div1">aaa</div>

 

window.onload = function(){
	var oDiv = document.getElementById("div1");

	oDiv.onclick = function(){
		alert(oDiv.id);
	};

这样的写法会导致内存泄漏。也就是满足内存泄漏的条件：就是当一个变量，这个变量是获取一个DOM节点或者是数组对象的时候，他的一个属性如onclick，去引用一个内部函数，，内部函数的变量又是引用外部对象的时候。

 这样的情况下怎么去解决呢。

window.onload = function(){
	var oDiv = document.getElementById("div1");

	oDiv.onclick = function(){
		alert(oDiv.id);
	};
//1，
window.onunload = function(){
	oDiv.onclick = unll;
}    
};
//2,方法
window.onload = function(){
	var oDiv = document.getElementById("div1");
	var id = oDiv.id;
	oDiv.onclick = function(){
		alert(oDiv.id);
	};
	oDiv = null;
};