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


Je savais ce que cela voulait dire, mais je me bats maintenant ...

Est-ce que cela dit essentiellement document.onload?

(function () {

})();

593
2017-11-22 14:19


origine


Réponses:


C'est un Expression de fonction invoquée immédiatement, ou IIFE pour faire court. Il s'exécute immédiatement après sa création.

Il n'a rien à voir avec un gestionnaire d'événements pour des événements (tels que document.onload).
Considérez la partie dans la première paire de parenthèses: (fonction(){})();.... c'est une déclaration de fonction régulière. Alors regarde la dernière paire (function(){})();, ceci est normalement ajouté à une expression pour appeler une fonction; dans ce cas, notre expression préalable.

Ce modèle est souvent utilisé lorsque vous essayez d'éviter de polluer l'espace de noms global, car toutes les variables utilisées à l'intérieur de l'IIFE (comme dans tout autre Ordinaire fonction) ne sont pas visibles en dehors de sa portée.
C'est pourquoi, peut-être, vous avez confondu cette construction avec un gestionnaire d'événements 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 tout code y soit exécuté. De même, le code d'analyse ne signifie pas automatiquement qu'il est exécuté, si par exemple l'IIFE est à l'intérieur d'une fonction, il ne sera pas exécuté avant que la fonction ne soit appelée.


670
2017-11-22 14:21



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

C'est comme si vous l'assigniez à une variable, et l'utilisiez juste après, seulement sans la variable:

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

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

$(function(){
});

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

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

91
2017-11-22 14:25



Une expression de fonction invoqué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 formulations communes:

// 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, alors 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

43
2018-05-29 03:09



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

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

31
2017-11-22 14:21



C'est dire exécuter immédiatement.

donc si je 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

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


Deuxième exemple:

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

alert(val); //18

26
2017-11-22 14:21



Cette construction est appelée Expression de fonction invoquée immédiatement (IIFE) ce qui signifie qu'il est exécuté immédiatement. Pensez-y comme une fonction appelée automatiquement lorsque l'interprète atteint cette fonction.

Cas d'utilisation le plus courant:

Un de ses cas d'utilisation les plus courants est de limiter la portée d'une variable faite via var. Variables créées via var avoir une portée limitée à une fonction de sorte que cette construction (qui est une enveloppe de fonction autour de certain code) s'assurera que votre portée variable ne fuit pas de cette fonction.

Dans l'exemple suivant, count ne sera pas disponible en dehors de la fonction invoquée immédiatement, c'est-à-dire countne fuira pas hors de la fonction. Vous devriez obtenir un Reference Error, si vous essayez d'y accéder en dehors de la fonction invoquée immédiatement.

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

ES6 Alternative (recommandé)

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

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 un code beaucoup plus simple pour vous assurer que la portée d'une variable ne fuit pas du bloc désiré.

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

Dans cet exemple, nous avons utilisé let définir un count variable qui fait count limité au bloc de code, nous avons créé avec les accolades {...}.

Je l'appelle un Curly Jail.


18
2017-10-29 21:31



(function () {
})();

C'est ce qu'on appelle IIFE (Expression de fonction invoquée immédiatement). L'un des célèbres motifs de conception javascript, et il est le cœur et l'âme du modèle de module moderne. Comme son nom l'indique, il s'exécute immédiatement après sa création. Ce modèle crée un périmètre d'exécution isolé ou privé.

JavaScript avant ECMAScript 6 utilisant la portée lexicale, IIFE est utilisé pour simuler la portée du bloc. (Avec ECMAScript 6, la définition de bloc est possible avec l'introduction du mot-clé let et const.) Référence pour problème de portée lexicale

Simuler le cadrage de bloc avec IIFE

L'avantage des performances de l'utilisation des IIFE est la possibilité de passer des objets globaux communément utilisés comme window, document, etc. Comme argument en réduisant la recherche de portée (Rappelez-vous que Javascript recherche la propriété dans une portée locale et la chaine jusqu'à portée globale). Donc, accéder aux objets globaux dans la portée locale, réduire le temps de recherche comme ci-dessous.

(function (globalObj) {
//Access the globalObj
})(window);

13
2018-05-19 11:28



Non, cette construction crée simplement une portée pour la dénomination. Si vous le cassez en parties, 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 ne sera visible qu'à l'intérieur de la même construction et ne polluera pas l'espace de noms global.


11
2017-11-22 14:22



C'est un fonction anonyme auto-invoquante.

Vérifiez W3Schools explication d'une fonction auto-invoquante.

Les expressions de fonction peuvent être rendues "auto-invoquantes".

Une expression auto-invoquée est appelée (démarrée) automatiquement, sans   être appelé.

Les expressions de fonction s'exécuteront automatiquement si l'expression est   suivi par ().

Vous ne pouvez pas invoquer une déclaration de fonction.


8
2017-11-22 14:21