Warum verursachen Javascript-Schleifen unerwartetes Verhalten in Event-Handlern?

Das berüchtigte Schleifenproblem in Javascript erneut aufgegriffen

Das berüchtigte Schleifenproblem in Javascript stellt Entwickler weiterhin vor ein Rätsel. Betrachten Sie den folgenden Codeausschnitt:

function addLinks () {
    for (var i=0, link; i<p>Dieser Code soll 5 Links erstellen, jeder mit einem onClick-Ereignis, das die aktuelle Link-ID anzeigt. Wenn jedoch auf diese Links geklickt wird, wird für alle „Link 5“ angezeigt.</p><p>Die Hauptursache für dieses Problem liegt im Scoping auf Funktionsebene von Javascript. Wenn die Schleife abgeschlossen ist, behält die i-Variable den Wert 5. Dies liegt daran, dass Javascript-Funktionen über ihre lexikalische Umgebung geschlossen sind, was bedeutet, dass sie Zugriff auf die im umgebenden Bereich definierten Variablen haben.</p><p>Eine Problemumgehung für dieses Problem besteht darin, einen Abschluss einzuführen, der den aktuellen Wert von i für jede Iteration erfasst:</p><pre class="brush:php;toolbar:false">function addLinks () {
    for (var i=0, link; i<p>In diesem Code wird für jeden Link ein neues Funktionsobjekt erstellt. Es verfügt über einen eigenen Gültigkeitsbereich und eine lokale Variable num, der der aktuelle Wert von i zugewiesen wird. Wenn die innere Funktion ausgeführt wird, verweist sie auf die Num-Variable des Abschlusses, die den korrekten, in der Schleife zugewiesenen Wert beibehält.</p><p>Dieser Ansatz ist zwar effektiv, führt jedoch zu Leistungseinbußen, wenn eine neue Funktion erstellt wird für jeden Event-Listener. Eine effizientere Alternative besteht darin, den DOM-Knoten selbst für die Datenspeicherung zu verwenden:</p><pre class="brush:php;toolbar:false">function linkListener() {
    alert(this.i);
}

function addLinks () {
    for(var i = 0; i <p>Durch die direkte Speicherung des i-Werts auf dem DOM-Knoten machen wir Abschlüsse überflüssig und verbessern so die Effizienz des Codes.</p>

Das obige ist der detaillierte Inhalt vonWarum verursachen Javascript-Schleifen unerwartetes Verhalten in Event-Handlern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!