Exemples détaillés d'exécution immédiate de fonctions en JavaScript

La fonction d'exécution immédiate js permet à votre fonction d'être exécutée immédiatement après sa création. Le mode fonction d'exécution immédiate js est une syntaxe qui permet à votre fonction d'être exécutée immédiatement après la définition. Ce mode est essentiellement une expression de fonction (nommée ou anonyme), exécutée. immédiatement après la création. Comparé à d'autres langages de programmation, JavaScript est relativement simple, de sorte que le code JavaScript regorge de toutes sortes de méthodes d'écriture étranges, qui apparaissent parfois dans le brouillard. Bien sûr, être capable de comprendre diverses méthodes d'écriture est également une compréhension plus approfondie. des caractéristiques du langage JavaScript. Cet article vous présente principalement les informations pertinentes sur l'exécution immédiate des fonctions en JavaScript. Les amis dans le besoin peuvent s'y référer.

Préface

( function(){…} )() et ( function (){…} () ) sont deux façons courantes d'écrire des fonctions JavaScript à exécuter immédiatement. c'était la même chose. Enveloppez la fonction anonyme entre parenthèses, puis ajoutez une parenthèse à la fin pour appeler la fonction, et enfin atteindre l'objectif d'exécuter la fonction immédiatement après sa définition. Plus tard, on a découvert la raison de l'ajout des parenthèses. n'était pas pareil.

Pas grand chose à dire ci-dessous, jetons un œil à l'introduction détaillée.

Habituellement, nous déclarons une fonction de la manière suivante :

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

Si vous avez vu des contrôles personnalisés, vous constaterez que la plupart d'entre eux suivent cette façon d'écrire :

(function() {
 "
 // 这里开始写功能需求
 })();

C'est ce que nous appelons souvent une fonction d'exécution immédiate (IIFE). Comme son nom l'indique, cela signifie que cette fonction exécute le corps de la fonction immédiatement et ne nécessite pas que vous l'appeliez activement. Les fonctions anonymes utilisent IIFE. Cela a deux objectifs :

Premièrement, il n'est pas nécessaire de nommer la fonction, ce qui évite de contaminer les variables globales

Deuxièmement, une portée distincte est formée à l'intérieur de IIFE. , qui peut encapsuler certaines variables privées qui ne peuvent pas être lues par le monde extérieur.

Si vous n’arrivez pas à comprendre ces deux phrases, commençons par le principe de fonctionnement de l’IIFE.

Parce que IIFE est généralement utilisé pour les fonctions anonymes, nous utilisons ici une simple fonction anonyme comme une châtaigne :

var f = function(){
 console.log("f");
}
f();

Nous constatons qu'ici f n'est qu'une variable de référence de ceci fonction anonyme, alors puisque f() peut appeler cette fonction, puis-je remplacer f par la fonction elle-même :

function(){
 console.log("f"); 
}();

Après l'exécution, j'obtiens les résultats suivants :

Uncaught SyntaxError: Unexpected token (

Le La raison de cette erreur est la suivante : une fois que le moteur Javascript a vu le mot-clé de fonction, il pense que ce qui suit est une instruction de déclaration de fonction et ne doit pas se terminer par des parenthèses. La solution est de faire savoir au moteur que la partie avant les parenthèses n'est pas une instruction de définition de fonction, mais une expression, qui peut être calculée. Voici une distinction entre la déclaration de fonction et l'expression de fonction :

1. déclaration (C'est-à-dire que nous utilisons généralement la fonction x(){} pour déclarer une fonction)

function myFunction () { /* logic here */ }

2 Expression de fonction (similaire à ce formulaire)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

.

À l'école primaire, nous avons appris que les expressions entourées de () seront exécutées en premier, comme la suivante :

1+(2+3) //这里先运行小括号里面的内容没有意见撒

En fait, les parenthèses ont également un effet similaire en JavaScript lorsque le moteur Javascript les voit. le mot-clé de fonction, il sera considéré comme une déclaration de déclaration de fonction, alors que se passera-t-il si le moteur Javascript voit les parenthèses en premier :

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

La fonction est exécutée avec succès :

f //控制台输出

Dans ce cas, le moteur Javascript pensera qu'il s'agit d'une expression, pas d'une déclaration de fonction. Bien sûr, il existe de nombreuses façons de faire croire au moteur Javascript qu'il s'agit d'une expression :

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

Retour. à la question précédente, pourquoi s'appelle-t-il IIFE ? Cela évite de polluer les variables globales. Si vous avez vu des plug-ins jquery écrits par d'autres, il y a généralement du code similaire à celui-ci :

(function($){
  "
  //插件实现代码
})(jQuery);

Le jquery ici est. en fait, le paramètre de la fonction anonyme. Pensez-y lorsque nous appelons anonyme. Si f() est utilisé dans la fonction, alors le paramètre anonyme est f(args), n'est-ce pas ? Ici, jquery est passé dans la fonction en tant que paramètre, alors quand ? le paramètre formel $ est utilisé à l'intérieur de la fonction, cela n'affectera pas l'environnement externe, car certains plug-ins utiliseront également le qualificatif $, et vous pourrez jouer avec lui dans cette fonction.

Pour ce qui précède, j'ai fait référence aux deux articles suivants au cours de ce processus :

javascript exécute une fonction immédiatement : repensez à function(){}() dans le plug- in

Fonction d'exécution immédiate en JavaScript

Recommandations associées :

Analyser l'opérateur avant la fonction pour implémenter la fonction d'exécution immédiate

Explication détaillée des fonctions anonymes, nommées JavaScript et des fonctions d'exécution immédiate IIFE

Fonctions d'exécution immédiate en 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!