筆者最近做了很多的應聘筆試題,其中有一個讓我印象特備深刻,關於在一個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); } } //點擊就可以觸發函數執行了