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