从一个基础Javascript面试题谈起
記得第一次面試前端工程師的時候，面試官出了一個機試題，要求每個p單擊時彈出不同的值，我是這么寫的，執(zhí)行的時候發(fā)現(xiàn)每次都是alert(5)，當時堅持認為我的代碼沒有任何問題，心想這么簡單的功能我怎么會弄錯。時至今日，想起這件事，便寫篇博文總結(jié)之。
<!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 οnlοad="init();"> <p>段落1</p> <p>斷落</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> </body> </html>執(zhí)行以上的代碼，會發(fā)現(xiàn)一個有趣的現(xiàn)象，每次單擊p時彈出的結(jié)果都是5，究竟為什么呢，而不是0,1,2,3,4？我想發(fā)表一下個人見解：
以上代碼是在onload的時候執(zhí)行了init方法，即已經(jīng)為每個P添加了單擊事件監(jiān)聽，當我們單擊P時，其實i的值此時已經(jīng)是5了（這其實是一個程序執(zhí)行的時間問題，在我們單擊P之前，循環(huán)已經(jīng)執(zhí)行完畢，i的值最后變成了5退出了循環(huán)，如果我們可以做到在一個p添加單擊時間之后和下一個p添加單擊事件之前單擊p的話，肯定得到的是0,1,2,3,4這樣的結(jié)果，但是我們的速度不可能超過程序執(zhí)行的速度，所以循環(huán)執(zhí)行完后，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); } } }我們可以在循環(huán)添加單擊事件時，將i的值存放到p里面（因為p是一個DOM對象，既然是對象，就可以添加屬性和方法，這里我們?yōu)閜添加一個屬性i，賦值為i）,最后我們每次單擊p的時候alert的總是p[i]的屬性值。
轉(zhuǎn)載于:https://www.cnblogs.com/iRavior/archive/2012/11/29/2793894.html
總結(jié)
以上是生活随笔為你收集整理的从一个基础Javascript面试题谈起的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WPF全屏设置
- 下一篇： 谈谈Java虚拟机——Class文件结构