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

La portée des fonctions en JavaScript existe pour "masquer" les variables et les fonctions

Conforme à notre principe du moindre privilège
En même temps, un autre avantage est qu'il peut éviter les identifiants avec le même nom Conflit de symboles
Aujourd'hui, nous parlerons principalement de cette fonction d'exécution immédiate
Avant cela, passons en revue les fonctions anonymes et les fonctions nommées

Fonctions anonymes et fonctions nommées

Que ce soit anonyme ou Naming est entièrement destiné aux expressions de fonction
La déclaration de fonction doit avoir un nom, sinon une erreur sera signalée

function foo(){ //函数声明
    //...}

Ici, je vais vous expliquer un œuf de Pâques, peut-être pourrez-vous le lire Lorsque j'écris des articles, j'aime toujours utiliser des exemples de code
Des mots comme fn, func, demo, foo, bar, foobar
fn et func sont les abréviations de fonction "function"
Demo est l'abréviation du mot démonstration "exemple"
foo, bar, foobar que l'on peut souvent voir dans les livres techniques et la littérature informatique
foo est une variante de fu, l'abréviation de fuck-up, signifiant "un gâchis"
bar est "au-delà de toute reconnaissance", ce qui signifie "au-delà de la cognition". En termes simples, "je ne peux pas reconnaître, c'est le bordel"
Ce ne sont que quelques espaces réservés, équivalents à nos Xiao Ming Xiao Hong, A, B, B, D, Zhang San, Li Si...

Les expressions de fonction peuvent avoir des noms ou pas de noms

var foo = function(){...};
console.log(foo.name); //foo
var bar = function foobar(){...};//不要这么写
console.log(bar.name); //foobar

On voit que la deuxième façon d'écrire change simplement l'attribut name de la fonction
Ça ne sert à rien à part ça, il ne faut pas l'écrire comme ça

Sinon notre plus l'usage courant est l'expression d'expression de fonction comme paramètre de rappel
Par exemple, dans une minuterie

setTimeout(function(){
    //...},1000);

Ici, j'ai écrit une expression de fonction anonyme
C'est simple et grossier à utiliser
mais ça présente plusieurs défauts

• Il n'y a pas de nom de fonction dans la pile de trace, ce qui rend le débogage difficile

• Si vous avez besoin de vous référer à vous-même, vous pouvez utiliser uniquement arguments.callee (désactivé en mode strict ES5)

• Réduction de la lisibilité et de l'intelligibilité de la fonction

Lorsque nous dissocions l'événement, nous avons également besoin du nom de la fonction (si nous n'utilisons pas onclick, etc. Liaison directe)
Donc
donner un nom à une expression de fonction est une bonne pratique et une bonne habitude

setTimeout(function timerHandler(){
    //...},1000);

Utilisation courante d'exécuter des fonctions immédiatement

Exécuter immédiatement Fonction, j'ai l'habitude de l'appeler ainsi
On l'appelle aussi fonction auto-exécutable, fonction d'exécution automatique, etc.
C'est plus standard
Immédiatement exécuter l'expression de fonction
Faites attention à ma formulation, c'est une expression de fonction

Ce n'est pas une syntaxe
mais tout le monde l'a utilisé et a trouvé qu'elle pouvait être utilisée de cette manière
Donc ça s'est répandu , jusqu'à présent
Comme son nom l'indique, le flux d'exécution s'exécute vers cette fonction et est exécuté immédiatement. La communauté
a défini des termes pour cela : IIFE (Expression de fonction immédiatement invoquée)

Notre usage courant est :

(function(){
    //...}());

(function(){
    //...})();

Nous utilisons Lorsque IIFE est utilisé, une expression de fonction anonyme est généralement utilisée
Bien sûr, il est également bon d'ajouter un nom, et cela a aussi les avantages d'une expression de fonction nommée
Les deux usages sont tout à fait équivalents, et c'est à vous de décider lequel utiliser
Mais je préfère écrire les parenthèses à l'extérieur, c'est plus confortable à regarder
Et j'ai vu que beaucoup de maîtres sont comme moi

Utilisation avancée de la fonction d'exécution immédiate

Légèrement avancée L'utilisation consiste à passer des paramètres dans la fonction d'exécution immédiate
Par exemple, nous passer couramment la fenêtre

var a = '全局';
(function IIFE(global){    var a = '局部';    console.log(a);// "局部"
    console.log(global.a);// "全局"})(window);

Quels sont les avantages du passage de la fenêtre ?
Analyse du point de vue de notre scope
(Vous pouvez jeter un œil au scope que j'ai écrit -> Portail)
La référence de l'objet global est mise en cache dans l'environnement local
Afin que nous puissions accédez-y plus rapidement Objets globaux, plus besoin de passer au niveau supérieur pour rechercher
Cette petite optimisation n'est pas le point clé
Le point clé peut être optimisé lors de la compression du code
Peut-être le code ci-dessus l'outil de compression peut le compresser comme ça

var a = '全局';
(function IIFE(g){    var a = '局部';    console.log(a);// "局部"
    console.log(g.a);// "全局"})(window);

Lorsque le code est très volumineux, ne sous-estimez pas cette optimisation

Exécutez immédiatement l'utilisation du changement de fonction

IIFE en a un autre variante, vous avez dû le voir

(function IIFE(demo){
    demo(window);})(function demo(global){
    //...
});

Ce mode de mise en paramètres de la fonction à exécuter semble fastidieux
mais il est largement utilisé. L'architecture globale des frameworks comme jQuery est également très similaire. à cela
Si vous y êtes habitué, vous sentirez que c'est plus facile à comprendre que notre méthode d'utilisation traditionnelle

L'expression globale de la fonction est définie dans la deuxième partie de l'IIFE, et est passée dans le première partie de IIFE en tant que paramètre
Ensuite, la fonction est appelée et la fenêtre est passée en paramètre Entrez

Compréhension de la fonction d'exécution immédiate

Pourquoi la fonction d'exécution immédiate peut-elle être exécutée automatiquement ?

(function(){
    //...})();

Pourquoi function(){}() ne peut pas être écrit comme ça ?
Parce qu'il s'agit d'une déclaration de fonction et que les déclarations de fonction ne peuvent pas être exécutées
Seules les expressions peuvent être exécutées

var demo = function(){
    console.log(1);// 1
    return 123;
}();
console.log(demo);// 123

Il s'agit d'une expression, elle peut donc être exécutée
Ce que la démo obtient est la valeur de retour de la fonction
Puisque l'expression peut être exécutée, les méthodes suivantes peuvent être exécutées immédiatement

+function(){
    console.log(1);// 1}();
-function(){
    console.log(2);// 2}();
!function(){
    console.log(3);// 3}()
,function(){
    console.log(4);// 4}();

Vous pouvez voir que même les virgules peuvent être transformées en expressions de fonction puis exécutées immédiatement
Mais il ne faut pas écrire comme ça
Si la fonction a une valeur de retour, des conséquences inattendues peuvent survenir Côté effets
et mauvaise lisibilité

Résumé

• Les déclarations de fonctions doivent avoir des noms

• Les expressions de fonction nommées sont une bonne pratique

• Exécution immédiate de l'utilisation de l'expression de fonction : (function(){}()); (function(){})();

• Exécutez immédiatement la fonction en passant les paramètres de fenêtre pour optimiser la vitesse de la fenêtre dans la chaîne de portée, ce qui est bénéfique pour compresser le code

• Seules les expressions peuvent être exécutées

Ce qui précède est une explication détaillée des fonctions anonymes, nommées et des fonctions d'exécution immédiate de JavaScript IIFE. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !