js 闭包传参_JavaScript闭包演示

有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。

闭包演示

function init() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].onclick = function() {

alert(i);

}

}

}

产品一

产品二

产品三

产品四

产品五

解决方式有两种，

1、将变量 i 保存给在每个段落对象(p)上

function init() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].i = i;

pAry[i].onclick = function() {

alert(this.i);

}

}

}

2、将变量 i 保存在匿名函数自身

function init2() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

(pAry[i].onclick = function() {

alert(arguments.callee.i);

}).i = i;

}

}

再增加3种

3、加一层闭包，i以函数参数形式传递给内层函数

function init3() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

(function(arg){

pAry[i].onclick = function() {

alert(arg);

};

})(i);//调用时参数

}

}

4、加一层闭包，i以局部变量形式传递给内存函数

function init4() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

(function () {

var temp = i;//调用时局部变量

pAry[i].onclick = function() {

alert(temp);

}

})();

}

}

5、加一层闭包，返回一个函数作为响应事件(注意与3的细微区别)

function init5() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].onclick = function(arg) {

return function() {//返回一个函数

alert(arg);

}

}(i);

}

}

又有一种方法

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

function init6() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].onclick = new Function(“alert(” + i + “);”);//new一次就产生一个函数实例

}

}

再增加一种

7、用Function实现，注意与6的区别

function init7() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].onclick = Function(‘alert(‘+i+’)’)

}

}

29

顶

1

踩

分享到：

2008-10-07 21:34

浏览 4492

评论

7 楼

chb2java

2010-11-19

早看早受益！

6 楼

xkxmud

2010-08-10

 

5 楼

CrystalBear

2010-06-08

第一种方法最好，楼主功力很深哦，竟然知道这么多写法

4 楼

CrystalBear

2010-06-08

闭包中的i是外部函数中变量i的一个引用，当init执行结束后i的值为5，所以p的onclick调用闭包时，i的值已经是5，

3 楼

yin_bp

2010-05-18

 

2 楼

xiaomimishiye

2010-05-13

lmh2072005 写道

1 楼

lmh2072005

2010-05-10