Explication détaillée des exemples de fonctions d'exécution immédiate 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. Cet article vous présente principalement les informations pertinentes sur la fonction d'exécution immédiate en JavaScript. J'espère qu'il pourra vous aider.

Préface

la fonction d'exécution js permet immédiatement à votre fonction d'être exécutée immédiatement après la création du mode d'exécution js est une syntaxe, ce mode. permet à vos fonctions d'être exécutées immédiatement après leur définition. Ce mode est essentiellement une expression de fonction (nommée ou anonyme) qui est exécutée immédiatement après sa création.

( function(){…} )() et ( function (){…} () ) sont deux façons courantes d'écrire des fonctions JavaScript à exécuter immédiatement. Au début, je pensais qu'il s'agissait d'une fonction anonyme encapsulée. entre parenthèses, puis l'ajout de parenthèses à la fin pour appeler la fonction atteint 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.

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

Habituellement, nous déclarons une fonction des manières suivantes :

// 声明函数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 quelques contrôles personnalisés, vous constaterez que la plupart d'entre eux suivent ce style d'écriture :

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

C'est ce qu'on dit souvent immédiatement Fonction d'exécution ( IIFE), comme son nom l'indique, signifie que cette fonction exécute le corps de la fonction immédiatement et ne nécessite pas que vous l'appeliez activement. Généralement, nous n'utilisons IIFE que pour les fonctions anonymes :

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 en externe.

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

Étant donné que IIFE est généralement utilisé pour les fonctions anonymes, nous utilisons ici une simple fonction anonyme comme exemple :

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

Nous avons trouvé ici que f n'est qu'une variable de référence de cette fonction anonyme, donc 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, les résultats suivants sont obtenus :

Uncaught SyntaxError: Unexpected token (

La raison de cette erreur est qu'après que le moteur Javascript ait vu le mot-clé de fonction, il pense qu'il est suivi de Les déclarations de fonction ne doivent 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 */ }
};

On a appris à l'école primaire que les expressions entourées de () seront exécutées en premier, comme les suivantes :

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

En fait, les parenthèses ont un effet similaire en JavaScript Lorsque le moteur Javascript voit le mot-clé de fonction, il pensera qu'il s'agit d'une déclaration de fonction. le moteur Javascript voit les parenthèses en premier. Que se passe-t-il avec les parenthèses :

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

La fonction s'exécute 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 dit-on que IIFE évite de polluer les variables globales Si vous avez vu des plug-ins jquery écrits par d'autres, là ? est généralement un code similaire à celui-ci :

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

Le jquery ici est en fait le paramètre de la fonction anonyme. Pensez-y lorsque nous appelons la fonction anonyme, nous utilisons f(), alors le paramètre anonyme est f(args ). C'est vrai, ici jquery est passé dans la fonction en tant que paramètre, puis lorsque le paramètre formel $ est utilisé à l'intérieur de la fonction, cela n'affectera pas l'environnement externe, car certains les plug-ins utilisent également le qualificatif $. Vous pouvez le lancer librement.

Recommandations associées :

Fonction d'exécution immédiate dans JS

Trois façons différentes d'écrire du JavaScript à exécution immédiate function_javascript Conseils

Introduction aux expressions de fonction d'exécution immédiate dans les astuces JavaScript_javascript

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!