Detaillierte Erläuterung der Beispiele für anonyme selbstausführende js-Funktionen

Anonyme selbstausführende Funktion: eine Funktion ohne Methodennamen, Abschluss: Ein Abschluss bezieht sich auf eine Funktion, die das Recht hat, auf eine andere Funktionsbereichsvariable zuzugreifen. In diesem Artikel wird hauptsächlich die anonyme Selbstausführung von js ausführlich erläutert Funktionsbeispiele, in der Hoffnung, allen zu helfen.

Erklären Sie anhand eines Beispiels:

Ich habe einen Fall aus dem Internet gefunden, in dem eine for-Schleife, eine anonyme selbstausführende Funktion und setTimeout verwendet wurden.

Fall 1:

var value1 =0,value2=0,value3=0;for(var i =1;i<=2;i++){  var i2 = i;  console.log(&#39;i2==>&#39;,i2);
  (function(){    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){  console.log(value1,value2,value3);
},100)

//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3

Erklärung:

1. Mehrere Syntaxen anonymer selbstausführender Funktionen

(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();

2. Verwenden Sie selbstausführende Funktionen und Abschlüsse, um Werte in einem speziellen Zustand zu speichern.

(function(){//自执行函数
    var i3 = i;    console.log('i3==>',i3);
    setTimeout(function(){//闭包
      console.log('i==>',i);      console.log('i2==>',i2);      console.log('i3==>',i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();

Die Variablen in der selbstausführenden Funktion werden entsprechend den Eigenschaften des Abschlusses aufgerufen Die Schleife wird jedes Mal aufgerufen, wenn verschiedene Werte der Schleife an den Abschluss übergeben werden.

3. Zum Verständnis der Schleifensyntax

for (语句 1; 语句 2; 语句 3) {
 ...
}

Anweisung 1. Ausführung 2 bevor die Schleife (Codeblock) startet Definition Bedingungen für die Ausführung der Schleife (Codeblock)
Anweisung 3 Ausführen, nachdem die Schleife (Codeblock) ausgeführt wurde

Analysiert anhand des folgenden Falls:

for(var i=1;i<3;i++){  console.log(i);
  setTimeout(function(){    console.log(&#39;i===>&#39;,i);
  },100);
}//输出12i===> 3i===> 3

for-Schleife Wenn i++ ausgeführt wird, nachdem der Code in der for-Anweisung endet, und setTimeout asynchron ausgeführt wird, sodass die i-Ausgabe in setTimeout tatsächlich wieder der Wert von i ++ nach dem letzten ist Schleife endet.

Erklärung von Fall 1:

Jeder sollte es verstehen, nachdem er dies gesehen hat. In Fall 1 sind i2 = 1 und i3 = 1 in der selbstausführenden Funktion, aber die Der Abschluss kann Werte in verschiedenen Zuständen speichern. Daher wird nur der zu diesem Zeitpunkt an setTimeout übergebene Wert im Cache von i2 gespeichert. Zu diesem Zeitpunkt wird setTimeout nicht ausgeführt.

Beim zweiten Mal wird i2=2;i3=2; in ähnlicher Weise auch im Abschluss gespeichert und i2 überschrieben.
Zu diesem Zeitpunkt endet die for-Schleifenausführung und das setTimeout Zu diesem Zeitpunkt beginnt die Ausführung der for-Schleife und die letzte Anweisung „i++“ wird ausgeführt, sodass sie zu diesem Zeitpunkt 3 und nicht 2 ist und i2 außerhalb des Abschlusses keine unterschiedlichen Zustände speichert kann nur überschrieben werden, während i3 im Abschluss jeden Wert im Speicher zwischenspeichert, um den Status beizubehalten, daher sind die Werte in setTimeout alle 3, i2 ist 2 und i3 ist der Wert jedes Zyklus

Vorteile am Ende des Artikels:

Vorteil 1: Eine Sammlung von Frontend, Java, Produktmanager, WeChat-Applet, Python und anderen Ressourcen wird verschenkt: https://www .jianshu.com/p/e8197d4d9880

Vorteil 2: Erste Schritte mit dem WeChat-Applet. Ein vollständiger Satz detaillierter Video-Tutorials mit tatsächlichen Kämpfen: https://www.jianshu.com/p/e8197d4d9880

Verwandte Empfehlungen:

Detaillierte Erläuterung der selbstausführenden JavaScript-Funktionen und jQuery-Erweiterungsmethoden

Selbstausführende JavaScript-Funktionen und jQuery-Erweiterungsmethoden

Selbstausführende Funktionen in js-Funktionen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für anonyme selbstausführende js-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!