今天看到一個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.這個代碼點(diǎn)擊鏈接彈出的i都是-1,這是為啥呢？
簡單來說就是函數(shù)變量作用域問題，如果把function() { alert(i); return false; } 當(dāng)做一個函數(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個參數(shù)的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)將結(jié)束。
提示：如果您省略了語句 2，那么必須在循環(huán)內(nèi)提供 break。否則循環(huán)就無法停下來。這樣有可能令瀏覽器崩潰。
c.關(guān)于 i--判斷：
判斷i--true /false的時候是先判斷i再運(yùn)算i--的。進(jìn)入最后一次判斷 i--的時候其實(shí)判斷 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);
}
其他網(wǎng)友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>產(chǎn)品一</p>
<p>產(chǎn)品二</p>
<p>產(chǎn)品三</p>
<p>產(chǎn)品四</p>
<p>產(chǎn)品五</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 保存在匿名函數(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ù)
}
}
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)用時局部變量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}
5、加一層閉包，返回一個函數(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() {//返回一個函數(shù)
alert(arg);
}
}(i);
}
}
6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個函數(shù)實(shí)例就會產(chǎn)生一個閉包
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ù)實(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+')')
}
}
總結(jié)完成，歡迎拍磚！
