Compréhension approfondie de la fonction d'exécution immédiate (function(){…})()_Connaissance de base en 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 peuvent parfois ressembler à de la fumée et des miroirs. Bien sûr, être capable de comprendre toutes sortes de méthodes d'écriture est aussi un avantage. compréhension plus approfondie des caractéristiques du langage JavaScript.

( function(){…} )() et ( function (){…} () ) sont deux façons courantes d'écrire des fonctions JavaScript à exécuter immédiatement. Au début, je pensais que c'était une fonction anonyme entourée de parenthèses, puis ajouté Les parenthèses appellent la fonction et atteignent finalement l'objectif d'exécuter la fonction immédiatement après sa définition. Plus tard, il a été découvert que la raison de l'ajout des parenthèses n'était pas la même. 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, la fonction anonyme est affectée à une variable, appelée expression de fonction. est l'expression de fonction 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 est la suivante : 1. Lorsque le moteur Javascript analyse le code javascript, il « déclaration de fonction hisse » la déclaration de fonction sur l'environnement d'exécution actuel (portée), tandis que l'expression de fonction doit attendre jusqu'à ce que le moteur Javascirtp atteigne la ligne où il est exécuté avant d'analyser l'expression de fonction 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. Appel de formulaire fnName(). Voici deux exemples de la différence.

Copier le code Le code est le suivant :

fnName();
function fnName (){
 …
}
//Normal, car la déclaration de fonction est « promue », l'appel de fonction peut être effectué avant la déclaration de fonction

fnName();
var fnName=function( ){
 …
}
//Erreur, la variable fnName n'a pas enregistré de référence à la fonction, l'appel de fonction doit être après l'expression de fonction

Copier le code Le code est le suivant :

var fnName=function(){
alert( 'Hello World');
}();
//Ajoutez des parenthèses après l'expression de la fonction Lorsque le moteur javascript analyse cela, la fonction peut être appelée immédiatement
function fnName(){
alert( 'Hello World');
}();
//Aucune erreur ne sera signalée, mais le moteur javascript analyse uniquement la déclaration de fonction et ignore les parenthèses suivantes. La déclaration de fonction ne sera pas appelée.
function(){
console.log('Hello World');
}();
//Erreur de syntaxe, bien que la fonction anonyme soit une expression de fonction, aucune opération d'affectation n'est effectuée,
//Le moteur javascript va donc démarrer. Le mot-clé function est utilisé comme déclaration de fonction, et une erreur est signalée : Un nom de fonction est requis

Après avoir compris quelques concepts de base des fonctions, j'ai repensé aux deux façons d'écrire des fonctions qui exécutent des fonctions immédiatement (function(){…})() et (function(){…} ()). Je pensais que c'était la même chose. Enveloppez une fonction anonyme entre parenthèses et ajoutez une parenthèse après pour appeler la fonction immédiatement. Je ne savais pas pourquoi les parenthèses avaient été ajoutées à l'époque, mais j'ai réalisé plus tard que si vous vouliez 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.

Copier le code Le code est le suivant :

(fonction(a){
console.log (a); //sortie Firebug 123, utilisez l'opérateur ()
})(123);

(function(a){
console.log(a); // sortie firebug 1234, utilisez l'opérateur ()
}(1234));

!function(a){
console.log(a); //sortie firebug 12345, utilisez! Opérateur
}(12345);

function(a){
console.log(a); //sortie Firebug 123456, utilisez l'opérateur
}(123456);

-function(a){
console.log(a); //firebug sortie 1234567, utilisez - Operator
}(1234567);

var fn=function(a ){
console.log(a); //sortie Firebug 12345678, utilisez = opérateur
}(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, tandis que (),! 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.

Ajouter des parenthèses est la chose la plus sûre à faire, 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 vous déclarez certaines variables dans la portée globale ou locale sur un projet développé par plusieurs personnes, elles peuvent être écrasées par d'autres personnes utilisant accidentellement des variables du même nom. Caractéristiques de la chaîne de portée de fonction JavaScript, cette technologie peut être utilisée 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 accéder aux variables à l'intérieur du "conteneur". ". variables, de sorte que 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. Enveloppez le code JQuery dans (function (window, undefined){...jquery code...} (window). Lorsque vous appelez le code JQuery dans la portée globale, vous pouvez protéger les variables internes de JQuery. .

Cet article est une compilation de compréhension personnelle. S'il y a des erreurs, veuillez les signaler. Les points de vue contenus dans l'article sont référencés à partir de :

"Guide faisant autorité Javascript", "Programmation avancée Javascript"