 
var elems = document.getElementsByTagName('a'); 

for (var i = 0; i < elems.length; i++) { 

alert(i); 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + i); 
}, 'false'); 
} 

再看一面一段：

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

 
var elems = document.getElementsByTagName('a'); 

for (var i = 0; i < elems.length; i++) { 

(function(index){ 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + index); 
}, 'false'); 
})(i); 
} 

HTML 代碼如下：

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

 
<body> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
</body> 

你可以想像下，前后兩段 script代碼的效果。

如果你能看出來(lái)效果的區(qū)別，那么恭喜你。至少我思考了很久，才明白里面的玄妙。

是的。你沒(méi)有看錯(cuò)，這里的第一段代碼，無(wú)論你點(diǎn)擊哪一個(gè)鏈接，輸出的都是 I am link # 8.

第二段代碼，才是你真正想要的結(jié)果，那么為什么呢。

看下面的代碼：

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

 
var elems = document.getElementsByTagName('a'); 

for (var i = 0; i < elems.length; i++) { 

alert(i); 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + i); 
//注意這里的回調(diào)函數(shù)只有的觸發(fā)的時(shí)候才會(huì)啟動(dòng) 
//一樣，這里的i的值也一樣在循環(huán)結(jié)束的時(shí)候也變化了 
}, 'false'); 

//原因在于 
//這里的elems[i] 雖然是引用的元素 
//但是回調(diào)函數(shù)中的i 已經(jīng)在循環(huán)結(jié)束后 
//變成了8(如果 elems 的長(zhǎng)度是 8 的話) 
} 

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

 
var elems = document.getElementsByTagName('a'); 

for (var i = 0; i < elems.length; i++) { 

(function(index){ 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + index); 
}, 'false'); 
})(i); 
//而這里的則不一樣 
//雖然循環(huán)結(jié)束后i 的值變成了8 
//但是在封裝在閉包內(nèi)的index 確實(shí)一直被locked 住的 
//一直保存在內(nèi)存中。 
//準(zhǔn)確的說(shuō) 應(yīng)該是整個(gè)函數(shù)都lock在內(nèi)存中. 

} 