以上場(chǎng)景是初學(xué)者經(jīng)常碰到的。即獲取HTML元素集合,循環(huán)給元素添加事件。在事件響應(yīng)函數(shù)中(event handler)獲取對(duì)應(yīng)的索引。但每次獲取的都是最后一次循環(huán)的索引。
原因是初學(xué)者并未理解JavaScript的閉包特性。通過(guò)element.onclick=function(){alert(i);}方式給元素添加點(diǎn)擊事件。響應(yīng)函數(shù)function(){alert(i);}中的 i 并非每次循環(huán)時(shí)對(duì)應(yīng)的 i(如0,1,2,3,4)而是循環(huán)后最后 i 的值5。 或者說(shuō)循環(huán)時(shí)響應(yīng)函數(shù)內(nèi)并未能保存對(duì)應(yīng)的值 i,而是最后一次i++的值5。
了解了原因,摸索出了很多解決辦法(純粹是興趣)。最先想到的前兩種
1、將變量 i 保存給在每個(gè)段落對(duì)象(p)上
function init1() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}
2、將變量 i 保存在匿名函數(shù)自身
function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
后又想到了三種
3、加一層閉包,i 以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)
function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//調(diào)用時(shí)參數(shù)
}
}
4、加一層閉包,i 以局部變量形式傳遞給內(nèi)層函數(shù)
function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//調(diào)用時(shí)局部變量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}
5、加一層閉包,返回一個(gè)函數(shù)作為響應(yīng)事件(注意與3的細(xì)微區(qū)別)
function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一個(gè)函數(shù)
alert(arg);
}
}(i);
}
}
后又發(fā)現(xiàn)了兩種
6、用Function實(shí)現(xiàn),實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會(huì)產(chǎn)生一個(gè)閉包
function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產(chǎn)生一個(gè)函數(shù)實(shí)例
}
}
7、用Function實(shí)現(xiàn),注意與6的區(qū)別
function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function('alert('+i+')');
}
}