Wie greife ich innerhalb einer JavaScript-Schließungsschleife auf eine externe Variable zu?

Zugriff auf externe Variablen in einer Schleife durch JavaScript-Abschluss

In JavaScript kommt es häufig vor, dass bei der Iteration über ein Array mithilfe einer For-Schleife ein Fehler auftritt Ein Problem, bei dem der Wert einer Variablen innerhalb der Schleife immer mit dem Wert der letzten Iteration übereinstimmt. Dies ist auf unterschiedliche Bereiche und Abschlüsse zurückzuführen.

Um dieses Problem zu lösen, kann eine Technik namens Abschlüsse eingesetzt werden. Ein Abschluss ist eine Funktion, die eine Funktion zurückgibt, die den Variablenbereich der übergeordneten Funktion erfasst.

Betrachten Sie das folgende Beispiel:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

In diesem Code ändert sich das Variablenelement mit jedem Iteration der Schleife. Wenn der Click-Handler aufgerufen wird, verwendet er den letzten Wert von item.

Um dieses Problem zu lösen, können wir einen Abschluss verwenden, um den Bereich der Schleifenvariablen zu erfassen:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

Hier: Wir verpacken die Click-Handler-Funktion in eine andere Funktion, die den Umfang des Elements während der Schleifeniteration erfasst. Wenn der Click-Handler aufgerufen wird, verwendet er den korrekten Wert von item.

Ein alternativer Ansatz besteht darin, die Funktion $.each() von jQuery zu verwenden, die die Schleifenvariable automatisch abruft, sodass kein Abschluss erforderlich ist:

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

Das obige ist der detaillierte Inhalt vonWie greife ich innerhalb einer JavaScript-Schließungsschleife auf eine externe Variable zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!