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

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

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

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

 
<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.這個代碼點擊鏈接彈出的i都是-1,這是為啥呢？

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

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

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

　　　　//todo

　　}

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

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

b.語句 2：

　　通常語句 2 用于評估初始變量的條件。

　　語句 2 同樣是可選的。

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

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

c.關于 i--判斷：

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

　　var i = 1;

　　!!i--;//ture

解決方法：

復制代碼代碼如下:

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

或者：

復制代碼代碼如下:

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

其他網友7中解決方法demo：

復制代碼代碼如下:

 
<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>產品一</p> 
<p>產品二</p> 
<p>產品三</p> 
<p>產品四</p> 
<p>產品五</p> 
</body> 
</html> 

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

復制代碼代碼如下:

 
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 保存在匿名函數自身

復制代碼代碼如下:

 
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以函數參數形式傳遞給內層函數

復制代碼代碼如下:

 
function init3() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; i++ ) { 
(function(arg){ 
pAry[i].onclick = function() { 
alert(arg); 
}; 
})(i);//調用時參數 
} 
} 

4、加一層閉包，i以局部變量形式傳遞給內存函數

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
function init5() { 
var pAry = document.getElementsByTagName("p"); 
for( var i=0; i<pAry.length; 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.length; i++ ) { 
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產生一個函數實例 
} 
} 

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

復制代碼代碼如下:

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

總結完成，歡迎拍磚！

您可能感興趣的文章: