Analyse approfondie des compétences d'exécution immédiate javascript function_javascript

Javascript est plus décontracté que les autres langages de programmation, donc le code JavaScript est plein de toutes sortes de méthodes d'écriture étranges, qui apparaissent parfois dans le brouillard ;
Bien entendu, être capable de comprendre différents types d’écriture, c’est aussi une compréhension plus approfondie des caractéristiques du langage JavaScript.

Syntaxe des fonctions JavaScript

Une fonction est un bloc de code entouré d'accolades, précédé du mot clé function :

fonction nom de fonction()
{
Voici le code à exécuter
>

Lorsque cette fonction est appelée, le code contenu dans la fonction sera exécuté.

Les fonctions peuvent être appelées directement lorsqu'un événement se produit (par exemple lorsque l'utilisateur clique sur un bouton) et peuvent être appelées de n'importe où par JavaScript.

Conseil : JavaScript est sensible à la casse. Le mot-clé function doit être en minuscules et la fonction doit être appelée avec la même casse que le nom de la fonction.

( function(){…} )() et ( function (){…} () ) sont deux manières courantes d'écrire des fonctions JavaScript pour exécuter des fonctions immédiatement ;

Au début, je pensais qu'il s'agissait d'une fonction anonyme entourée de parenthèses, puis des parenthèses ont été ajoutées à la fin pour appeler la fonction. Enfin, l'objectif d'exécuter la fonction immédiatement après sa définition a été atteint ;
On a découvert plus tard que la raison des parenthèses n’était pas celle-là. Pour comprendre l’exécution immédiate des fonctions, vous devez d’abord comprendre quelques concepts de base des fonctions.

Déclaration de fonction, expression de fonction, fonction anonyme

Déclaration de fonction : function fnName () {…} ; Utilisez le mot-clé function pour déclarer une fonction, puis spécifiez un nom de fonction, qui est appelé une déclaration de fonction.

Expression de fonction : var fnName = function () {…}; Utilisez le mot-clé function pour déclarer une fonction, mais ne donnez pas de nom à la fonction. Enfin, attribuez la fonction anonyme à une variable, appelée expression de fonction. est la forme de syntaxe d'expression la plus courante.

Fonction anonyme : function () {} ; Utilisez le mot-clé function pour déclarer une fonction, mais ne donnez pas de nom à la fonction, elle est donc appelée fonction anonyme. Les fonctions anonymes ont de nombreuses fonctions. . Lorsqu'elle est affectée à une variable, une fonction est créée, l'attribution d'un événement devient un gestionnaire d'événement ou crée une fermeture, etc.

La différence entre la déclaration de fonction et l'expression de fonction :

1. Lorsque le moteur Javascript analyse le code JavaScript, il "Déclaration de fonction Hisser" la déclaration de fonction sur l'environnement d'exécution actuel (portée), et l'expression de fonction doit attendre que le moteur Javascirtp exécute la ligne où elle se trouve. . Ce n'est qu'alors que l'expression de la fonction sera analysée ligne par ligne de haut en bas ;

2. Vous pouvez ajouter des parenthèses après l'expression de fonction pour appeler la fonction immédiatement. La déclaration de fonction n'est pas autorisée et ne peut être appelée que sous la forme de fnName().

Exemple :

 fnName(); 
 function fnName(){ 
  ... 
 } 
 //正常,因为"提升"了函数声明,函数调用可在函数声明之前 
 fnName(); 
 var fnName = function(){ 
  ... 
 } //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
 var fnName = function(){ 
  alert("Hello World"); 
 }(); 
 //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数 
 function fnName(){ 
  alert("Hello World"); 
 }(); 
 //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用 
 function(){ 
  console.log("Hello World"); 
 }();
 //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作, 
//所以javascript引擎将开头的function关键字当做函数声明,

Erreur : Un nom de fonction est requis

Après avoir compris quelques concepts de base des fonctions, revenons sur ( function(){…} )() et ( function(){…} () ) deux façons d'écrire des fonctions qui s'exécutent immédiatement,

Au début, je pensais que c'était une fonction anonyme entourée de parenthèses, suivie de parenthèses pour appeler la fonction immédiatement. Je ne savais pas pourquoi les parenthèses avaient été ajoutées à l'époque ;

J'ai compris plus tard que si vous souhaitez ajouter des parenthèses après le corps de la fonction pour l'appeler immédiatement, la fonction doit être une expression de fonction, pas une déclaration de fonction.

 ( function(a){ 
  console.log(a); //firebug输出123,使用()运算符 
 })(123); 
 ( function(a){ 
  console.log(a); //firebug输出1234,使用()运算符 
 }(1234)); 
 ! function(a){ 
  console.log(a); //firebug输出12345,使用！运算符 
 }(12345); 
 + function(a){ 
  console.log(a); //firebug输出123456,使用+运算符 
 }(123456); 
 - function(a){ 
  console.log(a); //firebug输出1234567,使用-运算符 
 }(1234567); 
 var fn= function(a){ 
  console.log(a); //firebug输出12345678,使用=运算符 
 }(12345678)

Pour voir le résultat, ajoutez-le devant la fonction ! , , - ou même des virgules peuvent avoir pour effet d'exécuter la fonction immédiatement après sa définition, et (),! Les opérateurs tels que , , - et = convertissent tous les déclarations de fonction en expressions de fonction, éliminant ainsi l'ambiguïté entre le moteur JavaScript dans l'identification des expressions de fonction et des déclarations de fonction, et indiquant au moteur JavaScript qu'il s'agit d'une expression de fonction, et non d'une déclaration de fonction, et qu'il peut être utilisé plus tard. Ajoutez des parenthèses et exécutez le code de la fonction immédiatement.

L'ajout de parenthèses est le moyen le plus sûr, car ! Les opérateurs tels que , , - effectueront également des opérations avec la valeur de retour de la fonction, provoquant parfois des problèmes inutiles.

Mais à quoi ça sert d'écrire ainsi ?

Il n'y a pas de concept de portée privée en JavaScript. Si un projet est développé par plusieurs personnes et que certaines variables sont déclarées dans la portée globale ou locale, elles peuvent être écrasées par d'autres personnes utilisant accidentellement des variables du même nom.

Selon les caractéristiques de la chaîne de portée des fonctions JavaScript, vous pouvez utiliser cette technologie pour imiter une portée privée et utiliser des fonctions anonymes comme « conteneur ». Les variables externes sont accessibles à l'intérieur du « conteneur », mais l'environnement externe ne peut pas y accéder. le "conteneur" "Variables internes, donc les variables définies à l'intérieur de (function(){...})() n'entreront pas en conflit avec les variables externes, communément appelées "wrapper anonyme" ou "espace de noms".

JQuery utilise cette méthode, en encapsulant le code JQuery dans (function (window, undefined){...jquery code...} (window), lors de l'appel du code JQuery dans la portée globale, vous pouvez protéger les variables internes de JQuery

Le contenu ci-dessus est la fonction d'exécution immédiate javascript présentée par l'éditeur. J'espère qu'il vous plaira.