從一個基礎Javascript面試題談起

來源:互聯網
上載者:User

記得第一次面試前端工程師的時候,面試官出了一個機試題,要求每個p單擊時彈出不同的值,我是這麼寫的,執行的時候發現每次都是alert(5),當時堅持認為My Code沒有任何問題,心想這麼簡單的功能我怎麼會弄錯。時至今日,想起這件事,便寫篇博文總結之。

<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>面試試題</title><script type="text/javascript"> function init() {        var pArr = document.getElementsByTagName("p");        for( var i=0; i<pArr.length; i++ ) {             pArr[i].onclick = function() {             alert(i);        }   }}</script> </head> <body onload="init();"> <p>段落1</p> <p>斷落</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> </body> </html> 

執行以上的代碼,會發現一個有趣的現象,每次單擊p時彈出的結果都是5,究竟為什麼呢,而不是0,1,2,3,4?我想發表一下個人見解:

以上代碼是在onload的時候執行了init方法,即已經為每個P添加了單擊事件監聽,當我們單擊P時,其實i的值此時已經是5了(這其實是一個程式執行的時間問題,在我們單擊P之前,迴圈已經執行完畢,i的值最後變成了5退出了迴圈,如果我們可以做到在一個p添加單擊時間之後和下一個p添加單擊事件之前單擊p的話,肯定得到的是0,1,2,3,4這樣的結果,但是我們的速度不可能超過程式執行的速度,所以迴圈執行完後,i其實最後是5了,我們以後的單擊都會alert(5),不知各位看官理解了沒有)。

如果我們想每次單擊都alert不同的值,我們可以參考下面這個簡單可行的方法:

function init() {        var pArr = document.getElementsByTagName("p");        for( var i=0; i<pArr.length; i++ ) {             pArr[i].i=i;         pArr[i].onclick = function() {             alert(this.i);        }   }}

我們可以在迴圈添加單擊事件時,將i的值存放到p裡面(因為p是一個DOM對象,既然是對象,就可以添加屬性和方法,這裡我們為p添加一個屬性i,賦值為i),最後我們每次單擊p的時候alert的總是p[i]的屬性值。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.