Detaillierte Erläuterung der Verwendung von js-Verschlüssen

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von js-Verschlüssen zu beachten sind. Schauen wir uns die folgenden praktischen Fälle an.

Abschluss ist die Kombination einer Funktion und der lexikalischen Umgebung, in der diese Funktion deklariert wurde >

Einfach ausgedrückt: Abschluss = Funktion + Umgebung

Das erste Beispiel für einen Abschluss

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

Tatsächlich ist diese Kastanie sehr einfach, displayName () ist die Abschlussfunktion in init(), und warum kann der extern definierte Variablenname innerhalb von displayName aufgerufen werden?

interne Funktion hat die Berechtigung, die Variablen in der externen Funktion abzurufen.

Zweites Beispiel

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

Kann das obige Beispiel 10 11 12 korrekt ausgeben?

Die Antwort lautet: Nein, und es wird auch ein

Syntaxfehler gemeldet....

console.log(i); hat festgestellt, dass ich es war Ausgabe 3 mal 3. Mit anderen Worten, nach setTimeout 1000 Millisekunden, wenn die Abschlussfunktion ausgeführt wird, ist die

for-Schleife beendet und i ist ein fester Wert, der nicht den erwarteten Effekt erzielt.

console.log(this); stellte fest, dass dies auf Window verweist, das heißt, die in der Funktion implementierte Abschlussfunktion wurde in eine

globale Funktion konvertiert und im Speicher gespeichert.

Sie müssen also eine andere Ausführungsfunktion definieren

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website! Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung benutzerdefinierter dynamischer Vue-Komponenten

Detaillierte Erläuterung der Schritte zur Verwendung von Time-Sharing Funktionen in js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von js-Verschlüssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!