一、闭包定义
一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
（2）一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
二、闭包应用
看了闭包的定义，也许您还觉得云里雾里，下面我们通过一个示例子闭包的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript闭包</title>
</head>
<body>
<script type="text/javascript">
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
arrays[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
上述代码，运行效果是，不管点击任何一个P元素，输出的结果都是5。
如何实现点击产品一 输出1、点击产品二 输出2、点击产品三 输出3 以此类推?
方案1 将变量保存在每个P元素对象上
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
arrays[i-1].i = i;
arrays[i-1].onclick = function() {
alert(this.i);
}
}
}
方案2 使用闭包，以参数的方式传递
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
(function(arg){
arrays[i-1].onclick = function() {
alert(arg);
};
})(i);
}
}
方案3 使用闭包，返回一个函数作为响应事件（与方案2有细微差别）
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
(function(arg){
arrays[i-1].onclick = function() {
return function(){
alert(arg)
};
};
})(i);
}
}
方案4 使用闭包，以调用时局部变量
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
(function(){
var temp = i;
arrays[i-1].onclick = function() {
alert(temp);
};
})();
}
}
方案5 使用匿名函数保存在函数自身
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ){
(arrays[i-1].onclick = function() {
//arguments.callee 表示函数对象自身的引用
alert(arguments.callee.i);
}).i = i;
}
}
方案6 使用Function实现，实际上是产生一个闭包
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
arrays[i-1].onclick = new Function("alert(" + i + ");");
}
}
方案7 使用Function （与6有细微差别一个new 一个没）
function init() {
var arrays = document.getElementsByTagName("p");
for( var i=1; i<=arrays.length; i++ ) {
arrays[i-1].onclick = Function("alert(" + i + ");");
}
}
网友评论