Charakteristische Analyse des JS-Abschlusses

Fügen Sie im Body-Tag ein u-Tag mit dem ID-Knoten hinzu. Unter dem ul-Tag befinden sich 5 li-Tags. Wie wird der li-Index eingeblendet, wenn auf verschiedene li-Tags geklickt wird?
1) Zuerst müssen Sie den UL-Knoten var node = document.getElementsById('node') abrufen
2) Holen Sie sich den untergeordneten Knoten unter dem Knoten node var list = node.children
**3) Fügen Sie onclick zum Schleifenereignis des untergeordneten Knotens hinzu (beachten Sie hier, dass es zu Schließungsproblemen kommen wird). for（var i=0;i< list.length; i++){
list[i].onclick = function()console.log(i)}}, wird jedes Mal festgestellt, dass Die Ausgabe beträgt 7. **
4) Analyseausgabe 7, da i mit var als globale Variable deklariert wird, die auf dieselbe Adresse zeigt. Nachdem die Schleife ausgeführt wurde, ist der Wert von i 7, sodass das in jeder Schleife gedruckte Ergebnis 7 ist.
Verwenden Sie zwei Möglichkeiten, um das Problem zu lösen: 1) Deklarieren Sie Bereichsvariablen auf Blockebene und verwenden Sie let j = i jedes Mal, wenn i wird übergeben, übernehmen.

let j = i; 
list[i].onclick = function(){console.log(j)}

In der Funktionsmethode wird die Variable j auf Blockebene aufgerufen, und diese Variable wird nicht durch Müll gesammelt. Jede for-Schleife zeigt auf eine andere Adresse, sodass der Index korrekt gedruckt werden kann, wenn das Klickereignis ausgelöst wird. 2) Verwenden Sie Abschlüsse, um das Problem zu lösen.

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

**Interpretation von Abschlüssen
Ein Abschluss ist eine Funktion, die die internen Variablen anderer Funktionen lesen kann. In der JavaScript-Sprache können nur Unterfunktionen innerhalb einer Funktion lokale Variablen lesen. Abschlüsse können einfach als „innerhalb einer Funktion definierte Funktionen“ verstanden werden. Im Wesentlichen ist ein Abschluss eine Brücke, die das Innere einer Funktion mit der Außenseite der Funktion verbindet.

Hinweis: Die Verwendung von Abschlüssen führt dazu, dass die Variablen in der Funktion im Speicher gespeichert werden, was viel Speicher verbraucht. Daher können Abschlüsse nicht missbraucht werden, was zu Leistungsproblemen auf der Webseite führen und Speicher verursachen kann Probleme in IE-Browsern. . Die endgültige Lösung besteht darin, alle nicht verwendeten lokalen Variablen zu löschen, bevor die Funktion beendet wird.

Verwenden Sie die Beispiele anderer Leute. Als Referenz

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

Verwandte Empfehlungen:

Ein einfaches Verständnis von JS-Verschlüssen

Detaillierte Erklärung gängiger Formen von JS-Verschlüssen

Beispielcode-Sharing für die Verwendung von JS-Schließungen

Das obige ist der detaillierte Inhalt vonCharakteristische Analyse des JS-Abschlusses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!