从一个基础Javascript面试题谈起

记得第一次面试前端工程师的时候，面试官出了一个机试题，要求每个p单击时弹出不同的值，我是这么写的，执行的时候发现每次都是alert(5)，当时坚持认为我的代码没有任何问题，心想这么简单的功能我怎么会弄错。时至今日，想起这件事，便写篇博文总结之。

<!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]的属性值。