Quelle est la construction (function () {}) () en JavaScript?

C'est une expression de fonction immédiatement appelée , ou IIFE pour une courte durée. Il s'exécute immédiatement après sa création.

Cela n'a rien à voir avec un gestionnaire d'événements pour tous les événements (tels que document.onload ).
La première paire de parenthèses ( function(){...} ) transforme le code dans (dans ce cas, une fonction) en une expression et la deuxième paire de parenthèses (function(){...}) () appels La fonction qui résulte de cette expression évaluée.

Ce modèle est souvent utilisé lorsque vous essayez d'éviter de polluer l'espace de noms global, car toutes les variables utilisées dans l'IIFE (comme dans toute autre fonction normale ) ne sont pas visibles en dehors de sa portée.
C'est pourquoi, peut-être, vous avez confondu cette construction avec un gestionnaire d' window.onload pour window.onload , car il est souvent utilisé comme ceci:

 (function(){ // all your code here var foo = function() {}; window.onload = foo; // ... })(); // foo is unreachable here (it's undefined) 

Correction suggérée par Guffa :

La fonction est exécutée juste après sa création, et non après qu'elle a été analysée. Le bloc de script entier est analysé avant que n'importe quel code ne soit exécuté. En outre, le code d'analyse ne signifie pas automatiquement qu'il est exécuté, si, par exemple, l'IIFE est dans une fonction, il ne sera pas exécuté tant que la fonction n'est pas appelée.

C'est juste une fonction anonyme qui est exécutée juste après sa création.

C'est comme si vous l'avez assigné à une variable, et l'a utilisé tout de suite, uniquement sans la variable:

 var f = function () { }; f(); 

Dans jQuery, il y a une construction similaire à laquelle vous pourriez penser:

 $(function(){ }); 

C'est la forme courte de lier l'événement ready :

 $(document).ready(function(){ }); 

Une expression de fonction appelée immédiatement (IIFE) appelle immédiatement une fonction. Cela signifie simplement que la fonction est exécutée immédiatement après la fin de la définition.

Trois autres termes communs:

 // Crockford's preference - parens on the inside (function() { console.log('Welcome to the Internet. Please follow me.'); }()); //The OPs example, parentheses on the outside (function() { console.log('Welcome to the Internet. Please follow me.'); })(); //Using the exclamation mark operator //https://stackoverflow.com/a/5654929/1175496 !function() { console.log('Welcome to the Internet. Please follow me.'); }(); 

S'il n'y a pas d'exigences particulières pour sa valeur de retour, nous pouvons écrire:

 !function(){}(); // => true ~function(){}(); // => -1 +function(){}(); // => NaN -function(){}(); // => NaN 

Alternativement, cela peut être:

 ~(function(){})(); void function(){}(); true && function(){ /* code */ }(); 15.0, function(){ /* code */ }(); 

Vous pouvez même écrire:

 new function(){ /* code */ } 31.new function(){ /* code */ }() //If no parameters, the last () is not required 

Il déclare une fonction anonyme, puis l'appelle:

 (function (local_arg) { // anonymous function console.log(local_arg); })(arg); 

Cela dit, exécuter immédiatement.

Donc si je le fais:

 var val = (function(){ var a = 0; // in the scope of this function return function(x){ a += x; return a; }; })(); alert(val(10)); //10 alert(val(11)); //21 

Fiddle: http://jsfiddle.net/maniator/LqvpQ/

Deuxième exemple:

 var val = (function(){ return 13 + 5; })(); alert(val); //18 

Non, cette construction crée simplement une marge de nomination. Si vous le divisez en pièces, vous pouvez voir que vous avez un externe

 (...)(); 

C'est une invocation de fonction. Dans la parenthèse, vous avez:

 function() {} 

C'est une fonction anonyme. Tout ce qui est déclaré avec var à l'intérieur de la construction sera visible uniquement dans la même construction et ne polluera pas l'espace de noms global.

Cette construction s'appelle Exception de la fonction appelée immédiatement (IIFE), ce qui signifie qu'elle s'exécute immédiatement. Pensez-y comme une fonction appelée automatiquement lorsque l'interprète atteint cette fonction.

Le cas le plus courant:

L'un de ses cas d'utilisation le plus courant est de limiter la portée d'une variable effectuée via var . Les variables créées via var ont une portée limitée à une fonction, de sorte que cette construction (qui est une enveloppe de fonction autour de certains codes) veillera à ce que votre portée variable n'échappe pas à cette fonction.

Dans l'exemple suivant, le compte ne sera pas disponible en dehors de la fonction immédiatement invoquée, c'est-à-dire que la portée du count ne sera pas échappée à la fonction. Vous devriez obtenir une Reference Error , si vous essayez d'y accéder en dehors de la fonction immédiatement appelée.

 (function () { var count = 10; })(); console.log(count); // Reference Error: count is not defined 

ES6 Alternative (recommandé)

Dans ES6, nous pouvons maintenant créer des variables via let et const . Les deux sont à bloc-scoped (contrairement à var qui est une fonction-scoped).

Par conséquent, au lieu d'utiliser cette construction complexe d'IIFE pour le cas d'utilisation que j'ai mentionné ci-dessus, vous pouvez maintenant écrire beaucoup, beaucoup plus simple de code pour vous assurer que la portée d'une variable ne se répercute pas sur votre bloc désiré.

 { let count = 10; }; console.log(count); // Reference Error: count is not defined 

Dans cet exemple, nous avons utilisé la définition d'une variable de count qui rend count limité au bloc de code, nous avons créé avec les crochets {...} .

Je l'appelle une Curly Jail .