Portée et fermeture de JavaScript

Question

J'essaie de comprendre les fermetures (il y a une blague là-bas quelque part) et je suis tombé sur ceci:

(function () { /* do cool stuff */ })();

Comment ça marche? Quel est le but de mettre la fonction en parens? Pourquoi les parens vides après?

Answer 1

Le but de ceci est que toutes les variables déclarées dans le truc cool ne seront pas créées dans un espace de noms global. Toute fonction en javascript créera une telle portée. Supposons que vous souhaitiez exécuter du code javascript. Si vous faites cela:

var b = 1; 
// stuff using b

Et un autre code utilise b, il aura votre valeur de gauche. (Ou pire, si un autre code définit la valeur b avant que votre code ne soit exécuté, puis essaie de récupérer son ancienne valeur plus tard, vous l’auriez modifiée entre-temps.)

Par contre, si vous avez ce code, il déclare puis appelle la fonction a:

function a() { 
     var b = 1;
}

a();

Et un autre code utilise plus tard b, il ne verra pas vos valeurs, car b est local à la fonction. Le problème avec ceci, bien sûr, est que vous continuez à donner un nom global - "un", dans ce cas. Nous voulons donc une fonction sans nom - c’est pourquoi vous obtenez le code que vous avez décrit. Il déclare une fonction sans nom, puis l'appelle.

Malheureusement, vous ne pouvez pas simplement dire:

function() { ... }()

car cela sera analysé comme une déclaration de déclaration de fonction , , puis une erreur de syntaxe. En encapsulant la déclaration de fonction entre parenthèses, vous obtenez une fonction expression , qui peut ensuite être appelée. Vous l'appelez comme n'importe quelle autre expression de fonction (comme ci-dessus), en utilisant le deuxième ensemble de parenthèses. Par exemple, si la fonction prenait des arguments, vous les y passeriez:

(function(a) { ... })(1)

Answer 2

Cela crée une fonction, l'appelle et la supprime.

Cela pourrait être plus clair si vous le regardez comme ceci:

var throwaway = function(){
    // do cool stuff
};
throwaway();

Ceci est fait pour créer un espace de noms privé. Le code dans la fonction peut avoir des fonctions et des variables sans se soucier des conflits avec d’autres codes chargés dans la page.

Answer 3

Je viens de découvrir ce post récemment. Ce type de définition de fonction & amp; appel est appelé fonctions auto-appelantes .

(function(){  //code })();

Le code à l'intérieur de la fonction sera exécuté immédiatement après sa définition.

Answer 4

Cette construction signifie déclarer une fonction anonyme et l'exécuter immédiatement. Si vous insérez votre code dans un corps de fonction, c'est parce que les variables que vous définissez à l'intérieur de celui-ci restent locales à la fonction et non comme des variables globales. Cependant, ils resteront visibles pour les fermetures définies dans cette fonction.

Answer 5

Les parenthèses autour de la fonction indiquent clairement que la fonction est une expression. Les parenthèses après sont l'appel de la fonction.

Notez que la fonction n'a pas de nom.

Answer 6

Une approche consiste à transmettre des variables à la fonction:

(function($, var_1, var_2) {
    // use JQuery, var_1 and var_2 as local variables
})($, var_1, var_2);

Answer 7

Le fait de placer la déclaration de fonction dans des parenthèses crée une expression qui renvoie la fonction anonyme à l’intérieur. Par conséquent, la première parenthèse correspond à une fonction.

Les "parenthèses vides" à la fin, invoquez la fonction définie, donc "// fait des trucs cool". s'exécute immédiatement.

C'est un moyen d'exécuter du code à la volée tout en maintenant les variables hors de la portée globale.

Ce qui est illustré ici n’a cependant rien à voir avec les fermetures - du moins pas directement. Les fermetures concernent le maintien d’une étendue lexicale après la sortie d’une fonction parent.