为什么一个JavaScript闭包工作而另一个没有？

Question

有两个版本,据说当用户点击第一个链接时,它会提醒"1",第二个链接,"2"等:

版本1:

<a href="#" id="link1">click me</a>
<a href="#" id="link2">click me</a>
<a href="#" id="link3">click me</a>
<a href="#" id="link4">click me</a>
<a href="#" id="link5">click me</a>

<script type="text/javascript">
    for (i = 1; i <= 5; i++) {
        document.getElementById('link' + i).onclick = (function() {
            return function() {
                var n = i;
                alert(n);
                return false;
            }
        })();
    }
</script>

版本2:

<a href="#" id="link1">click me</a>
<a href="#" id="link2">click me</a>
<a href="#" id="link3">click me</a>
<a href="#" id="link4">click me</a>
<a href="#" id="link5">click me</a>

<script type="text/javascript">
    for (i = 1; i <= 5; i++) {
        document.getElementById('link' + i).onclick = (function() {
            var n = i;
            return function() {
                alert(n);
                return false;
            }
        })();
    }
</script>

版本1不起作用.版本2将.我想我知道原因,但想与其他人的解释比较为什么版本1不起作用.

Answer 1

版本 1 不起作用，因为有一个公共变量“i”（在本例中是全局变量，因为您忘记了var），该变量由循环创建的每个“click”处理函数共享。

在第二个版本中，您使用小包装函数创建一个新的词法作用域。这为每个“点击”处理程序提供了它自己的私有“i”。