Explication détaillée des exemples de fonctions auto-exécutables anonymes js

Fonction anonyme auto-exécutable : une fonction sans nom de méthode, fermeture : une fermeture fait référence à une fonction qui a accès à une autre variable de portée de fonction ; cet article partage principalement avec vous une explication détaillée des exemples de fonctions auto-exécutables anonymes js ; , dans l'espoir d'aider tout le monde.

Expliquez à travers un exemple :

J'ai trouvé un cas sur Internet, en utilisant une boucle for, une fonction auto-exécutable anonyme et setTimeout.

Cas 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

Explication :

1. Plusieurs syntaxes de fonctions anonymes auto-exécutables

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

2. Utilisez des fonctions auto-exécutables et des fermetures pour enregistrer des valeurs dans un état spécial

(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);
  })();

Les variables de la fonction auto-exécutable seront appelées dans la fermeture Selon les caractéristiques de la fermeture, le for. la boucle sera appelée à chaque fois Différentes valeurs de la boucle sont transmises à la fermeture ;

3. Pour la compréhension de la syntaxe de la boucle

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

Instruction 1 Exécuter l'instruction
. 2 avant le début de la boucle (bloc de code) Définition Conditions d'exécution de la boucle (bloc de code)
Instruction 3 Exécuter après l'exécution de la boucle (bloc de code)

Analysé à travers le cas suivant :

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

boucle for Quand, i++ sera exécuté après la fin du code dans l'instruction for, et setTimeout est exécuté de manière asynchrone, donc la sortie i dans setTimeout est en fait à nouveau la valeur de i ++ après le dernier la boucle se termine.

Explication du cas 1 :

Tout le monde devrait comprendre après avoir vu cela. Dans le cas 1, lors de la première boucle, i2 = 1, et i3 = 1 dans la fonction auto-exécutable, mais le. la fermeture peut Enregistrer les valeurs dans différents états. Par conséquent, seul i3 de la valeur transmise à setTimeout à ce moment est enregistré dans le cache et i sera écrasé par la deuxième boucle. À ce moment, setTimeout n'est pas exécuté ; 🎜> Lors de la deuxième fois lors de la boucle, i2=2;i3=2; De même, i3=2 est également enregistré dans la fermeture et i2 est écrasé
À ce moment, l'exécution de la boucle for se termine et la fonction setTimeout ; commence à être exécuté à ce moment-là, la boucle for se termine et la dernière instruction "i++" est exécutée, donc à ce moment-là, c'est 3, pas 2 et i2 en dehors de la fermeture ne sauvegarde pas les différents états dans la fermeture et. ne peut être écrasé que tandis que i3 dans la fermeture Chaque valeur sera mise en cache en mémoire par la fermeture pour conserver l'état, donc les valeurs dans setTimeout sont toutes 3, i2 est 2 et i3 est la valeur de chaque cycle
Avantages à la fin de l'article :

Avantage 1 : Une collection complète de front-end, Java, chef de produit, applet WeChat, Python et d'autres ressources : https://www.jianshu .com/p/e8197d4d9880

Avantage 2 : Démarrer avec l'applet WeChat Un ensemble complet de didacticiels vidéo détaillés avec des combats réels : https://www.jianshu.com/p/e8197d4d9880

Recommandations associées :

Explication détaillée des fonctions auto-exécutables JavaScript et des méthodes d'extension jQuery

Fonctions auto-exécutables JavaScript et méthodes d'extension jQuery

Fonctions auto-exécutables dans les fonctions js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!