js一段作用域代码的问题？

Question

这段代码点击a链接，弹出的都是4，我可以理解i是全局变量，为什么会加到4，for循环里边的i明明加到了3，那跑出来的4？

<a href="" id="1">1</a>
<a href="" id="2">2</a>
<a href="" id="3">3</a>

for (var i = 1; i <= 3; i++) {
    var ele = document.getElementById(i);
    alert(i);
    ele.onclick = function(e) {
        e.preventDefault();
        alert(i);
    }
}

Answer 1

1.和i是否是全局变量无关,放在函数作用域下依旧是4

(function(){
    for (var i = 1; i <= 3; i++) {
        var ele = document.getElementById(i);
        alert(i);
        ele.onclick = function(e) {
            e.preventDefault();
            alert(i);
        }
    }
}());

2 因为for循环是执行i++后再去执行的i<=3的逻辑判断

Answer 2

循环里面的确是
加到3，可是循环执行完毕还有一个i++

Answer 3

因为绑定是循环的变量i，而最后i=4，所以才会这样；alert($(this).data('id'));就能得到你要的效果了。

Answer 4

当你alert的时候，循环已经执行完，而i并非是你所期望的1,2,3,而是执行完的for里边的i,并且这个i在执行完之后，++了一次，所以是4，你可以用闭包的方式解决，你也可以采用操作dom的方式（但不建议）