日期:2014-05-16  浏览次数:20550 次

关于作用域链的一个小问题
小弟刚接触js不久,看到作用域链这里有点迷糊了,

<html>  
<head>  
<script type="text/javascript">  
function buttonInit(){  
    for(var i=1;i<4;i++){  
        var b=document.getElementById("button"+i);  
        b.addEventListener("click",function(){ alert("Button"+i);},false);  
    }  
}  
window.onload=buttonInit;  
</script>  
</head>  
<body>  
<button id="button1">Button1</button>  
<button id="button2">Button2</button>  
<button id="button3">Button3</button>  
</body>  
</html>  


这里说到文档加载完毕以后,给这几个按钮注册点击事件,点击按钮的时候居然都是弹出"Button4".
原因是注册的匿名函数里面没有i,所以到作用域链的第二个对象里面找,i这时候等于4,所以弹出的是"Button4"。

请问应该怎么解决呢。。

------解决方案--------------------
改成这样即可
<script type="text/javascript">  
function buttonInit(){  
    for(var i=1;i<4;i++){  
        var b=document.getElementById("button"+i);  
        b.i = i;
        b.addEventListener("click",function(){alert("Button "+ this.i);},false);  
    }  
}  
window.onload=buttonInit;  
</script>