快捷導(dǎo)航

Javascript閉包演示代碼小結(jié)

更新時間：2011年03月13日 23:22:49 作者：

有個網(wǎng)友問了個問題，如下的html，為什么點擊所有的段落p輸出都是5，而不是alert出對應(yīng)的0，1，2，3，4。

以上場景是初學(xué)者經(jīng)常碰到的。即獲取HTML元素集合，循環(huán)給元素添加事件。在事件響應(yīng)函數(shù)中(event handler)獲取對應(yīng)的索引。但每次獲取的都是最后一次循環(huán)的索引。
原因是初學(xué)者并未理解JavaScript的閉包特性。通過element.onclick=function(){alert(i);}方式給元素添加點擊事件。響應(yīng)函數(shù)function(){alert(i);}中的 i 并非每次循環(huán)時對應(yīng)的 i（如0，1，2，3，4）而是循環(huán)后最后 i 的值5。或者說循環(huán)時響應(yīng)函數(shù)內(nèi)并未能保存對應(yīng)的值 i，而是最后一次i++的值5。

了解了原因，摸索出了很多解決辦法（純粹是興趣）。最先想到的前兩種
1、將變量 i 保存給在每個段落對象（p）上

復(fù)制代碼代碼如下:

 
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ù)自身

復(fù)制代碼代碼如下:

 
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ù)

復(fù)制代碼代碼如下:

 
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ù) 
} 
} 

4、加一層閉包，i 以局部變量形式傳遞給內(nèi)層函數(shù)

復(fù)制代碼代碼如下:

 
function init4() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
(function () { 
var temp = i;//調(diào)用時局部變量 
pAry[i].onclick = function() { 
alert(temp); 
} 
})(); 
} 
} 

5、加一層閉包，返回一個函數(shù)作為響應(yīng)事件（注意與3的細微區(qū)別）

復(fù)制代碼代碼如下:

 
function init5() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
pAry[i].onclick = function(arg) { 
return function() {//返回一個函數(shù) 
alert(arg); 
} 
}(i); 
} 
} 

后又發(fā)現(xiàn)了兩種
6、用Function實現(xiàn)，實際上每產(chǎn)生一個函數(shù)實例就會產(chǎn)生一個閉包

復(fù)制代碼代碼如下:

 
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)生一個函數(shù)實例 
} 
} 

7、用Function實現(xiàn)，注意與6的區(qū)別

復(fù)制代碼代碼如下:

 
function init7() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
pAry[i].onclick = Function('alert('+i+')'); 
} 
} 

您可能感興趣的文章: