js在for循環裏邊定義函數用到自增變量產生的問題

筆者最近做了很多的應聘筆試題,其中有一個讓我印象特備深刻,關於在一個for循環裏邊些函數運用到for循環裏邊定義的變量的問題,廢話不多說,先上代碼,大家可以看看這段代碼最後的結果是什麼:

var array=[];//定義一個數組,空的
for(var i=0;i<3;i++){
    array[i]=function(){
        alert(i);
    }
}
array[0]();
array[1]();
array[2]();

初學者可能咋一看,想,這不是很簡單嗎?依次彈出0,1,2。親愛的同學們,你可以親自試一試,結果會出乎你的意料,結果是彈出三次3,這道底是爲什麼呢?讓我們來仔細研究一下。


這段代碼在執行的時候首先會新建立一個全局數組array,這是個空數組。在每一次for循環的時候,在進入for循環內部,是不會執行(進入)array[i]的函數體內部的內容的,但是此時會把array[i]加入到全局的作用域鏈中去。在for循環結束之後(此時i應該等於3了),也就是在函數初始化結束之後,我們現在真真正正的調用一下我們剛剛創建的函數,此時,程序纔回去執行函數體內部的東西,要輸出i的值,但是此時i的值已經是3了,所以輸出來的全是3。


找到了這個問題,我們現在來想想辦法解決它吧,可惜,筆者的js功底薄,還木有找到解決數組函數的這個問題的辦法。不過,如果是對象(如通過li標籤獲取的一串文檔對象),那我就可以解決他了,如下:

var array=document.getElementsByTagName("li");//獲取節點元素,當然不會只有一個接點
for(var i=0;i<3;i++){
    array.index=i;
    array[i].onclick=function(){
        alert(this.index);
    }
}
//點擊就可以觸發函數執行了


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章