javascript自啟動(dòng)函數(shù)的問題探討
更新時(shí)間：2013年10月05日 15:08:47 作者：
自啟動(dòng)函數(shù)想必大家并不陌生吧，在本文將為大家詳細(xì)探討下，感興趣的朋友可不要錯(cuò)過
話不多說了。
先來看兩段代碼：
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');
}
再看一面一段：
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 代碼如下：
<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代碼的效果。
如果你能看出來效果的區(qū)別，那么恭喜你。至少我思考了很久，才明白里面的玄妙。
是的。你沒有看錯(cuò)，這里的第一段代碼，無論你點(diǎn)擊哪一個(gè)鏈接，輸出的都是 I am link # 8.
第二段代碼，才是你真正想要的結(jié)果，那么為什么呢。
看下面的代碼：
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 的長度是 8 的話)
}
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)確的說 應(yīng)該是整個(gè)函數(shù)都lock在內(nèi)存中.
}
這里可能需要一些javascript閉包的知識(shí)。
以上代碼，想了很久，記錄下來，以防止忘記。
先來看兩段代碼：
復(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);
}, '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代碼的效果。
如果你能看出來效果的區(qū)別，那么恭喜你。至少我思考了很久，才明白里面的玄妙。
是的。你沒有看錯(cuò)，這里的第一段代碼，無論你點(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 的長度是 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)確的說 應(yīng)該是整個(gè)函數(shù)都lock在內(nèi)存中.
}
這里可能需要一些javascript閉包的知識(shí)。
以上代碼，想了很久，記錄下來，以防止忘記。
相關(guān)文章
JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法
這篇文章主要為大家詳細(xì)介紹了JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS來動(dòng)態(tài)的修改url實(shí)現(xiàn)對url的增刪查改
通過get方式提交post表單等方式來動(dòng)態(tài)修改url存在諸多的不妥，因此，想到了通過JS來動(dòng)態(tài)的修改url，來實(shí)現(xiàn)對url的增刪查改2014-09-09
JavaScript數(shù)組、json對象、eval()函數(shù)用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)組、json對象、eval()函數(shù)用法,結(jié)合實(shí)例形式分析了JS數(shù)組創(chuàng)建、賦值、連接、翻轉(zhuǎn),json對象定義、讀取,eval()函數(shù)的功能、使用等,需要的朋友可以參考下2019-02-02
解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題
下面小編就為大家?guī)硪黄鉀Qhtml input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
JS獲取隨機(jī)數(shù)函數(shù)可自定義最小值最大值
這篇文章主要介紹的是一個(gè)JS獲取隨機(jī)數(shù)的函數(shù)可自定義最小值最大值,需要的朋友可以參考下2014-05-05
javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全，涉及到altkey和event屬性語法定義及用法，本文介紹的非常詳細(xì)，感興趣的朋友一起看看吧2015-11-11
用js限制網(wǎng)頁只在微信瀏覽器中打開(或者只能手機(jī)端訪問)
這篇文章主要介紹了用js限制網(wǎng)頁只在微信瀏覽器中打開,很多電影站也是這么限制的，原因你懂的，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了javascript繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本篇文章主要介紹了JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
在javascript中，hash指的是哈希表，是一種根據(jù)關(guān)鍵字直接訪問內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)，hash就是一個(gè)賦值的方法，但實(shí)際用的并不需要太復(fù)雜，能用的就一點(diǎn)點(diǎn)，寫法也非常簡單，hash有多種寫法，本文給大家介紹javascript?hash使用，感興趣的朋友一起看看吧2023-10-10