JS中 for循环后 值i的问题

Question

以下代码可以获得正确的循环时i的值（0,1,2,3）：

document.body.onclick=function(){

for(var i=0;i<4;i++){

!function(i){

var o = document.getElementById(i);

o.onmouseover=function(){

alert(i);

}

alert(i);

}(i);

}

但是稍微改动一下后，i的值为最终值（4,4,4,4)：

document.body.onclick=function(){

for(var i=0;i<4;i++){

var o = document.getElementById(i);

o.onmouseover=function(){

alert(i);

}

alert(i);

}

请问一下这是为什么？？纠结了好久！！

Answer 1

第一次：for循环嵌套  自动函数， i从0-3  执行四次，每次执行，自执行函数也会跟着执行，也就会按照i值的不同，给不同的节点，绑定不同的事件，所有最后当你出发不同的节点的时候，可以跳出不同的值。第二次：直接for循环，最后i ＝ 4，for循环结束，var o = document.getElementById(i);  这个执行了四次，所有每个节点都绑定了时间，但i的值却没有传入onmouseover事件作用域，所有最后出发，回往上查找i的值，找到的都是i ＝ 4；

Answer 2

后面那段会把循环体的语句循环四遍之后，再把变量i的值转换成常量。这时i的值已经是4了，也就是说你给ID为4的元素绑定了四次事件。而函数每次调用哪里，每次执行一次就马上调用一次，并且把当前的i传进去。所以就是0,1,2,3。大概的道理就是这样，感觉自己道行有点不够，所以解释不咋清楚。一定等大神的解释吧！