Warum löst die Verwendung von Abschlüssen das Loop-and-Closure-Problem von JavaScript?

Berüchtigtes Schleifenproblem von JavaScript mit Schließung gelöst

Betrachten Sie den folgenden Code, der fünf Links mit eindeutigen Alarmereignissen generieren soll, um deren jeweilige IDs anzuzeigen:

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 erfüllt jedoch nicht seinen Zweck, da beim Klicken auf einen der Links „Link 5“ angezeigt wird. Um dies zu beheben, weist der folgende modifizierte Code jedem Link erfolgreich seine eindeutige ID zu:

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

Die Schließungsmagie verstehen

Der Schlüssel zum Erfolg dieses Codes liegt in der Konzept der Schließungen. In JavaScript ist ein Abschluss eine Funktion, die Zugriff auf die lexikalische Umgebung der Funktion behält, in der sie erstellt wurde. Mit anderen Worten: Sie kann unabhängig von ihrem eigenen Gültigkeitsbereich auf Variablen und Argumente zugreifen, die in der äußeren Funktion definiert sind.

Im ersten Codeausschnitt referenziert die innere Funktion die Variable i, die an die Spitze des gehoben wird Umfang der Funktion. Während die Schleife iteriert, wird die Variable i aktualisiert und die innere Funktion verweist immer auf ihren aktuellsten Wert. Dies führt dazu, dass beim Klicken auf alle Links „Link 5“ angezeigt wird.

Im zweiten Codeausschnitt erstellt das äußere Funktionsliteral ein neues Funktionsobjekt mit eigenem Gültigkeitsbereich und lokaler Variable num, deren Wert auf den aktuellen Wert gesetzt wird Wert von i. Das Funktionsobjekt wird als Ereignishandler für das Onclick-Ereignis des Links zurückgegeben.

Entscheidend ist, dass die innere Funktion im Kontext der lexikalischen Umgebung der äußeren Funktion erstellt wird, die die Variable num enthält. Somit hat die innere Funktion weiterhin Zugriff auf num und gibt eine Funktion zurück, die die richtige ID benachrichtigt, wenn auf den Link geklickt wird.

Dieser Ansatz stellt sicher, dass jeder Link seinen eigenen eindeutigen Abschluss hat, der den korrekten Wert von i beibehält auch nachdem die Schleife beendet wurde.

Das obige ist der detaillierte Inhalt vonWarum löst die Verwendung von Abschlüssen das Loop-and-Closure-Problem von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!