為什么一個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”處理函數共享。

在第二個版本中，您使用小包裝函數創建一個新的詞法范圍。 這給每個“點擊”處理程序它是非常自己的私人“我”。

Answer 2

在第二個示例中，您創建了一個var n = i; 它使i值在onclick函數范圍內。 在第一個時，onclick函數仍然使用i全局值

我建議用這個用法：

  for (i = 1; i <= 5; i++) {
    document.getElementById('link' + i).onclick = (function(i) {
      return function() {
        alert(i); 
        return false;
      }
    })(i);
  }

在這種情況下，你會得到相同的行為，因為i將是onclick函數的局部變量，因為它是一個參數。

Answer 3

首先不起作用，因為：我是每個閉包的一部分。 經過5次迭代后，由於后綴增量運算符，我才6。 每次調用事件處理程序時，它從其閉包范圍獲取i的值，該范圍始終為6。

第二部分有效：因為每個閉包都在n中復制i，n是每個閉包的一部分。