快捷導(dǎo)航

javascript閉包傳參和事件的循環(huán)綁定示例探討

更新時(shí)間：2014年04月17日 15:59:05 作者：

按常理循環(huán)綁定事件，但是得到的結(jié)果卻不是想要的，下面有個(gè)不錯(cuò)的示例，可以為大家詳細(xì)分解下

今天看到一個(gè)javascript的題目，按常理循環(huán)綁定事件，但是得到的結(jié)果卻不是想要的。

 
<a href="#">text</a> 
<br> 
<a href="#">link</a> 
<script> 
var as = document.getElementsByTagName('a'); 
for ( var i = as.length; i--; ) { 
as[i].onclick = function() { 
alert(i); 
return false; 
} 
} 
</script> 

1.這個(gè)代碼點(diǎn)擊鏈接彈出的i都是-1,這是為啥呢？

簡單來說就是函數(shù)變量作用域問題，如果把function() { alert(i); return false; } 當(dāng)做一個(gè)函數(shù) a();a()內(nèi)部未定義變量i,但是內(nèi)部使用了，于是向外查找,找到for循環(huán)里定義的i，點(diǎn)擊事件是for循環(huán)完畢后才開始執(zhí)行的，執(zhí)行完畢后i的值已經(jīng)變成-1；所以每次彈出的都是-1；

2. 2個(gè)參數(shù)的for循環(huán)也不常見！疑惑？

　　for（語句1，語句2，語句3）{

　　　　//todo

　　}

a.for循環(huán)條件

通常說語句1、語句2、語句3都是可選的。

b.語句 2：

　　通常語句 2 用于評(píng)估初始變量的條件。

　　語句 2 同樣是可選的。

　　如果語句 2 返回 true，則循環(huán)再次開始，如果返回 false，則循環(huán)將結(jié)束。

　　提示：如果您省略了語句 2，那么必須在循環(huán)內(nèi)提供 break。否則循環(huán)就無法停下來。這樣有可能令瀏覽器崩潰。

c.關(guān)于 i--判斷：

　　判斷i--true /false的時(shí)候是先判斷i再運(yùn)算i--的。進(jìn)入最后一次判斷 i--的時(shí)候其實(shí)判斷 i==0的時(shí)候，判斷后又執(zhí)行了一次i--,for循環(huán)終止，于是i的值變成了-1;

　　var i = 1;

　　!!i--;//ture

解決方法：

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

 
var as = document.getElementsByTagName('a'); 
for ( var i = as.length; i--; ) { 
(function(i){ 
as[i].onclick = function() { 
alert(i); 
return false; 
} 
})(i) 
} 

或者：

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

 
var as = document.getElementsByTagName('a'); 
for ( var i = as.length; i--; ) { 
var a = function(i){ 
as[i].onclick = function() { 
alert(i); 
return false; 
} 
} 
a(i); 
} 

其他網(wǎng)友7中解決方法demo：

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

 
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>閉包演示</title> 
<script type="text/javascript"> 

function init() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
pAry[i].onclick = function() { 
alert(i); 
} 
} 
} 
</script> 
</head> 
<body onload="init();"> 
<p>產(chǎn)品一</p> 
<p>產(chǎn)品二</p> 
<p>產(chǎn)品三</p> 
<p>產(chǎn)品四</p> 
<p>產(chǎn)品五</p> 
</body> 
</html> 

1、將變量 i 保存給在每個(gè)段落對象（p）上

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

 
function init() { 
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í)參數(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)用時(shí)局部變量 
pAry[i].onclick = function() { 
alert(temp); 
} 
})(); 
} 
} 

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

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

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

6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會(huì)產(chǎn)生一個(gè)閉包

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

7、用Function實(shí)現(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+')') 
} 
} 

總結(jié)完成，歡迎拍磚！

您可能感興趣的文章: