Warum verursachen JavaScript-Schleifen beim Binden von Ereignishandlern unerwartetes Verhalten?

Das berüchtigte Problem mit der JavaScript-Schleife verstehen

In JavaScript tritt ein häufiges Problem auf, wenn eine Schleife zum Generieren von Elementen und zum Binden dieser an Ereignishandler verwendet wird . Der folgende Code veranschaulicht dieses Problem:

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

Dieser Code soll 5 Links generieren, von denen jeder beim Klicken seinen eigenen Index anzeigt. Wenn Sie jedoch darauf klicken, wird bei allen Links „Link 5“ angezeigt. Diese Anomalie ist auf den Abschlussmechanismus in JavaScript zurückzuführen.

Im ersten Snippet verwaltet die im Ereignishandler der Schleife definierte innere Funktion einen Verweis auf die Variable i. Nach Abschluss der Schleife nimmt i jedoch den Wert 5 an. Wenn die Event-Handler alarm(i) aufrufen, ist der Wert von i daher immer 5, was zu einem falschen Verhalten führt.

Im zweiten Code Snippet: Dieses Problem wird gelöst, indem die innere Funktion in einen sofort aufgerufenen Funktionsausdruck (IIFE) eingeschlossen wird:

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

Das IIFE stellt sicher, dass eine neue Instanz des Für jede Iteration wird eine innere Funktion erstellt, wodurch der gewünschte Wert von i innerhalb seines Gültigkeitsbereichs erhalten bleibt. Wenn der Ereignishandler ausgeführt wird, alarmiert er den richtigen Index mithilfe des erfassten Werts von i aus dem IIFE.

Alternativ besteht ein effizienterer Ansatz darin, den aktuellen Wert von i direkt einer Eigenschaft des DOM-Knotens zuzuweisen. Ermöglicht einen einfachen Zugriff während der Ausführung des Event-Handlers:

link.i = i;
link.onclick = function () {
    alert(this.i);
};

Diese Lösung macht die Erstellung neuer Funktionsobjekte für jeden Link überflüssig.

Das obige ist der detaillierte Inhalt vonWarum verursachen JavaScript-Schleifen beim Binden von Ereignishandlern unerwartetes Verhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!