Warum funktioniert ein JavaScript-Abschluss und der andere nicht?

Question

Es gibt zwei Versionen, angeblich, wenn der Benutzer den ersten Link klicken, wird "1", und die zweite Verbindung, "2" aufmerksam machen, etc .:

Version 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> 

Version 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> 

Version 1 wird nicht funktionieren. Version 2 wird. Ich denke, ich kenne den Grund dafür, möchte aber mit den Erklärungen anderer vergleichen, warum Version 1 nicht funktioniert.

Answer 1

Version 1 funktioniert nicht, weil es eine gemeinsame Variable „i“ ist (a globale Variable in diesem Fall, weil vergessen haben var), die von jedem geteilt wird „Klick“ Handler-Funktion die Schleife erzeugt.

In der zweiten Version erstellen Sie einen neuen lexikalischen Bereich mit der kleinen Wrapper-Funktion. Das gibt jedem "Klick" -Handler sein eigenes privates "i".

Answer 2

Im zweiten Beispiel erstellen Sie eine var n = i; es macht i Wert innerhalb der Onclick-Funktion Bereich. Während bei der ersten noch die Onclick-Funktion globalen Wert von i

verwendet würde ich diese Nutzung vorschlagen statt:

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

In diesem Fall, dass Sie das gleiche Verhalten erhalten werden, da i die lokale Variable sein wird für Onclick-Funktion, wie es ein Argument ist.

Answer 3

Erstens funktioniert nicht, weil: i ist der Teil jeder Schließung. Nach 5 Iterationen ist jetzt 6 aufgrund des Postfixinkrementoperators. Jedes Mal, wenn der Ereignishandler aufgerufen wird, erhält er den Wert von i aus seinem Abschlussbereich, der immer 6.

Zweiter Teil funktioniert: Weil jeder Verschluss eine Kopie von i in n macht, ist n Teil jedes Abschlusses.