<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
window.onload = function (){
var ULa = document.getElementById("ul1");
var lia = ULa.getElementsByTagName("li");
for(var i=0;i<lia.length;i++){
lia[i].onclick = function(){
alert(i);//此时打印的都是4 原因是闭包的问题 解析程序首先会在事件处理程序内部查找,这个匿名函数内部没有定义变量i,然后往上级查找,此时i为4
};
};
}
下面做下分析:因为在for循环里面指定给lia[i]
.onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。
解决方法:
1、window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
(function(e){
aLi[i].onclick = function(){
console.log(i);//全部打印4
}
})(i);
}
}
2、从匿名包装器中返回一个函数
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi [i].onclick = (function(e){
return function(){
alert(e + 1);
};
})(i);
}
}