Qu'est-ce que la construction (function () {}) () en JavaScript?
Je savais ce que cela voulait dire, mais je me bats maintenant ...
Est-ce essentiellement dire document.onload?
(function () {
})();
C’est une expression de fonction appelée immédiatement , ou IIFE en abrégé. Il s’exécute immédiatement après sa création.
Cela n'a rien à voir avec aucun gestionnaire d'événements pour aucun événement (tel que document.onload).
Considérons la partie dans la première paire de parenthèses: (function(){})();.... c'est une expression de fonction régulière. Regardez ensuite la dernière paire (function(){})();, elle est normalement ajoutée à une expression pour appeler une fonction. dans ce cas, notre expression antérieure.
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 vous avez peut-être confondu cette construction avec un gestionnaire d’événements pour window.onload, car elle est souvent utilisée 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, pas après son analyse. Le bloc de script entier est analysé avant que tout code qu'il contient ne soit exécuté. En outre, l'analyse du code ne signifie pas automatiquement qu'il est exécuté. Si, par exemple, le IIFE est à l'intérieur d'une fonction, il ne sera pas exécuté jusqu'à ce que la fonction soit 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'assigniez à une variable et que vous l'utilisiez juste après, mais sans la variable:
var f = function () {
};
f();
Dans jQuery, il existe une construction similaire à laquelle vous pourriez penser:
$(function(){
});
C'est la forme abrégée de la liaison de l'événement ready:
$(document).ready(function(){
});
Une expression de fonction immédiatement appelée (IIFE) appelle immédiatement une fonction. Cela signifie simplement que la fonction est exécutée immédiatement après l'achèvement de la définition.
Trois formulations plus courantes:
// 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 spéciales 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
Il déclare une fonction anonyme, puis l'appelle:
(function (local_arg) {
// anonymous function
console.log(local_arg);
})(arg);
Cela signifie exécuter immédiatement.
alors 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
Cette construction s'appelle Expression de fonction immédiatement appelée (IIFE) , ce qui signifie qu'elle est exécutée immédiatement. Pensez-y comme une fonction appelée automatiquement lorsque l'interprète accède à cette fonction.
Cas d'utilisation le plus courant:
L'un de ses cas d'utilisation les plus courants consiste à limiter la portée d'une variable créée via var. Les variables créées via var ont une étendue limitée à une fonction, de sorte que cette construction (qui encapsule une fonction autour d'un certain code) garantit que votre étendue de variable ne sort pas de cette fonction.
Dans l'exemple suivant, le nombre ne sera pas disponible en dehors de la fonction immédiatement invoquée, c'est-à-dire que la portée de count ne sortira pas de la fonction. Vous devriez obtenir un Reference Error, si vous essayez quand même d'y accéder en dehors de la fonction immédiatement invoquée.
(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 ont une portée de bloc (contrairement à var qui est une portée de fonction).
Par conséquent, au lieu d'utiliser cette construction complexe de IIFE pour le cas d'utilisation que j'ai mentionné ci-dessus, vous pouvez maintenant écrire du code beaucoup plus simple pour vous assurer que la portée d'une variable ne fuit pas hors du bloc souhaité.
{
let count = 10;
};
console.log(count); // Reference Error: count is not defined
Dans cet exemple, nous avons utilisé let pour définir une variable count qui limite count au bloc de code que nous avons créé avec les accolades {...}.
Je l'appelle un Curly Jail.
(function () {
})();
Ceci s'appelle IIFE (expression de fonction immédiatement appelée). L'un des modèles de conception javascript célèbres, 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 domaine 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 portée des blocs est possible avec l'introduction des mots clés let et const.) Référence du problème avec la portée lexicale
_ { Simuler la portée d'un bloc avec IIFE } _
L’avantage de l’utilisation de IIFE en termes de performances est la possibilité de transmettre des objets globaux couramment utilisés tels que fenêtre, document, etc. Donc, en accédant à des objets globaux dans une étendue locale, réduisez le temps de recherche comme ci-dessous.
(function (globalObj) {
//Access the globalObj
})(window);
Non, cette construction crée simplement une portée pour nommer. Si vous le casser 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 dans la construction ne sera visible qu'à l'intérieur de la même construction et ne polluera pas l'espace de noms global.
Il s'agit d'une expression de fonction immédiatement appelée en Javascript:
Pour comprendre l'IIFE dans JS, décomposons-le:
- Expression : Quelque chose qui retourne une valeur
Exemple: essayez de suivre la console chrome. Ce sont des expressions dans JS.
a = 10 output = 10 (1+3) output = 4
- Expression de fonction :
Exemple:
// Function Expression var greet = function(name){ return 'Namaste' + ' ' + name; } greet('Santosh');
Comment fonctionne l'expression de fonction:
- Lorsque le moteur JS s'exécute pour la première fois (contexte d'exécution - phase de création), cette fonction (située à droite de = ci-dessus) n'est ni exécutée ni stockée en mémoire. La variable 'greet' se voit attribuer une valeur 'non définie' par le moteur JS.
- Au cours de l'exécution (contexte d'exécution - phase d'exécution), l'objet de fonction est créé à la volée ( il n'est pas encore exécuté ), est assigné à la variable 'saluer' et peut être invoqué à l'aide de 'saluer (' quelque chose ')'.
3. Expression de funtion immédiatement invoquée:
Exemple:
// IIFE
var greeting = function(name) {
return 'Namaste' + ' ' + name;
}('Santosh')
console.log(greeting) // Namaste Santosh.
Comment fonctionne l'IIFE :
- Notez le '()' immédiatement après la déclaration de la fonction. Chaque objet de fonction a une propriété 'CODE' qui est appelable. Et nous pouvons l'appeler (ou l'invoquer) en utilisant des accolades '()'.
- Donc, ici, pendant l'exécution (Contexte d'exécution - Phase d'exécution), l'objet de fonction est créé et exécuté en même temps - Alors maintenant, la variable de salutation, au lieu d'avoir la fonction objet, a sa valeur de retour (une chaîne)
Cas d'utilisation typique de IIFE dans JS:
Le motif IIFE suivant est assez couramment utilisé.
// IIFE
// Spelling of Function was not correct , result into error
(function (name) {
var greeting = 'Namaste';
console.log(greeting + ' ' + name);
})('Santosh');
- nous faisons deux choses ici . a) Envelopper notre expression de fonction entre accolades (). Cela indique à l'analyseur syntaxique que tout ce qui est placé à l'intérieur du () est une expression (expression de fonction dans ce cas) et constitue un code valide.
b) Nous appelons cette fonction en même temps en utilisant le () à la fin.
Donc, cette fonction est créée et exécutée en même temps (IIFE).
Important cas d'utilisation pour IIFE:
IIFE protège notre code.
- IIFE, en tant que fonction, possède son propre contexte d'exécution, ce qui signifie que toutes les variables créées à l'intérieur de celle-ci sont locales à cette fonction et ne sont pas partagées avec le contexte d'exécution global.
Supposons qu'un autre fichier JS (test1.js) soit utilisé dans mon application avec iife.js (voir ci-dessous).
// test1.js
var greeting = 'Hello';
// iife.js
// Spelling of Function was not correct , result into error
(function (name) {
var greeting = 'Namaste';
console.log(greeting + ' ' + name);
})('Santosh');
console.log(greeting) // No collision happens here. It prints 'Hello'.
Donc, IIFE nous aide à écrire du code sécurisé lorsque nous n'entrons pas en collision avec les objets globaux par inadvertance.
C'est une fonction anonyme auto-invoquante.
Consultez l'explication W3Schools d'une fonction auto-invoquante .
Les expressions de fonction peuvent être rendues "auto-invoquantes".
Une expression auto-appelante est invoqué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 soi-même une déclaration de fonction.
C'est la fonction anonyme invocante. Il est exécuté tant qu'il est défini. Ce qui signifie que cette fonction est définie et s’appelle immédiatement après la définition.
Et l’explication de la syntaxe est la suivante: La fonction dans la première parenthèse () est la fonction qui n’a pas de nom et par la prochaine parenthèse ();, vous pouvez comprendre qu’elle est appelée au moment où elle est définie. Et vous pouvez passer n'importe quel argument dans cette seconde parenthèse () qui sera saisi dans la fonction qui se trouve dans la première parenthèse. Voir cet exemple:
(function(obj){
// Do something with this obj
})(object);
Ici, l'objet que vous passez sera accessible au sein de la fonction par 'obj', comme vous le saisissez dans la signature de la fonction.
Commencer ici:
var b = 'bee';
console.log(b); // global
Mettez-le dans une fonction et c'est n'est plus global - votre objectif principal.
function a() {
var b = 'bee';
console.log(b);
}
a();
console.log(b); // ReferenceError: b is not defined -- *as desired*
Appelez immédiatement la fonction - oups:
function a() {
var b = 'bee';
console.log(b);
}(); // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'
Utilisez les parenthèses pour éviter une erreur de syntaxe:
(function a() {
var b = 'bee';
console.log(b);
})(); // OK now
Vous pouvez laisser le nom de la fonction:
(function () { // no name required
var b = 'bee';
console.log(b);
})();
Il n'est pas nécessaire que ce soit plus compliqué que cela.
Les fonctions à exécution automatique sont généralement utilisées pour encapsuler le contexte et éviter les collusions de noms. Toute variable que vous définissez dans (function () {..}) () n'est pas globale.
Le code
var same_name = 1;
var myVar = (function() {
var same_name = 2;
console.log(same_name);
})();
console.log(same_name);
produit cette sortie:
2
1
En utilisant cette syntaxe, vous évitez les conflits avec les variables globales déclarées ailleurs dans votre code JavaScript.
Fonction anonyme auto-exécutante. Il est exécuté dès sa création.
Voici un exemple court et factice utile:
function prepareList(el){
var list = (function(){
var l = [];
for(var i = 0; i < 9; i++){
l.Push(i);
}
return l;
})();
return function (el){
for(var i = 0, l = list.length; i < l; i++){
if(list[i] == el) return list[i];
}
return null;
};
}
var search = prepareList();
search(2);
search(3);
Ainsi, au lieu de créer une liste à chaque fois, vous ne la créez qu'une seule fois (moins de frais généraux).
Un autre cas d'utilisation est la mémorisation où un objet de cache n'est pas global
var calculate = (function() {
var cache = {};
return function(a) {
if (cache[a]) {
return cache[a];
} else {
// Calculate heavy operation
cache[a] = heavyOperation(a);
return cache[a];
}
}
})();
IIFE (expression de fonction invoquée immédiatement) est une fonction qui s'exécute dès que le script se charge et disparaît.
Considérons la fonction ci-dessous écrite dans un fichier nommé iife.js
(function(){
console.log("Hello Stackoverflow!");
})();
Ce code ci-dessus sera exécuté dès que vous aurez chargé iife.js et imprimera 'Hello Stackoverflow! 'sur la console des outils de développement.
Pour une explication détaillée, voir Expression de fonction immédiatement appelée (IIFE)
Une expression de fonction immédiatement appelée (IIFE) est une fonction qui est exécutée dès sa création. Il n'a aucun lien avec aucun événement ou exécution asynchrone. Vous pouvez définir un IIFE comme indiqué ci-dessous:
(function() {
// all your code here
// ...
})();
La première paire de parenthèses function () {...} convertit le code à l'intérieur des parenthèses en une expression. La seconde paire de parenthèses appelle la fonction résultant de l'expression.
Une IIFE peut également être décrite comme une fonction anonyme à invocation automatique. Son utilisation la plus courante est de limiter la portée d'une variable créée avec var ou d'encapsuler un contexte pour éviter les conflits de noms.
La raison pour laquelle des fonctions anonymes évoquant elles-mêmes sont utilisées est qu'elles ne doivent jamais être appelées par un autre code, car elles "configurent" le code que IS devait appeler (avec la portée des fonctions et des variables).
En d'autres termes, ils sont comme des programmes qui "font des classes", au début du programme. Une fois instanciés (automatiquement), les seules fonctions disponibles sont celles renvoyées par la fonction anonyme. Cependant, toutes les autres fonctions cachées sont toujours là, avec n'importe quel état (variables définies lors de la création de la portée).
Très sympa.
Il s'appelle IIFE - Expression de fonction immédiatement appelée. Voici un exemple pour montrer sa syntaxe et son utilisation. Il est utilisé pour définir l'utilisation de variables uniquement jusqu'à la fonction et non au-delà.
(function () {
function Question(q,a,c) {
this.q = q;
this.a = a;
this.c = c;
}
Question.prototype.displayQuestion = function() {
console.log(this.q);
for (var i = 0; i < this.a.length; i++) {
console.log(i+": "+this.a[i]);
}
}
Question.prototype.checkAnswer = function(ans) {
if (ans===this.c) {
console.log("correct");
} else {
console.log("incorrect");
}
}
var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);
var questions = [q1, q2, q3];
var n = Math.floor(Math.random() * questions.length)
var answer = parseInt(Prompt(questions[n].displayQuestion()));
questions[n].checkAnswer(answer);
})();
C'est une fonction anonymous qui est self invoquant . Communément appelé Expression de Fonction Immédiatement Invoquée (IIFE).
Habituellement, nous n'invoquons pas une fonction immédiatement après l'avoir écrite dans le programme. En termes extrêmement simples, lorsque vous appelez une fonction juste après sa création, elle est appelée IIFE - un nom de fantaisie.
Le code suivant:
(function () {
})();
est appelée expression de fonction immédiatement invoquée (IIFE).
Cela s'appelle une expression de fonction parce que l'opérateur ( yourcode ) en Javascript le force dans une expression. La différence entre une expression function et une déclaration function est la suivante:
// declaration:
function declaredFunction () {}
// expressions:
// storing function into variable
const expressedFunction = function () {}
// Using () operator, which transforms the function into an expression
(function () {})
Une expression est simplement un groupe de code qui peut être évalué à une valeur unique. Dans le cas des expressions de l'exemple ci-dessus, cette valeur était un objet single function.
Après avoir obtenu une expression qui renvoie à un objet fonction, nous pouvons immédiatement invoke l’objet fonction avec l’opérateur (). Par exemple:
(function() {
const foo = 10; // all variables inside here are scoped to the function block
console.log(foo);
})();
console.log(foo); // referenceError foo is scoped to the IIFEPourquoi est-ce utile?
Lorsque nous traitons avec une base de code volumineuse et/ou lorsque nous importons différentes bibliothèques, les risques de conflits de noms augmentent. Lorsque nous écrivons certaines parties de notre code qui sont liées (et utilisent donc les mêmes variables) dans un IIFE, toutes les variables et les noms de fonction sont étendus aux crochets de fonction de IIFE. Cela réduit les risques de conflits de noms et vous permet de les nommer de manière plus imprudente (par exemple, vous n’avez pas à les préfixer).
Je pense que les 2 jeux de crochets sont un peu déroutants, mais j’ai vu un autre exemple d'utilisation de Google, ils ont utilisé quelque chose de similaire, j'espère que cela vous aidera à mieux comprendre:
var app = window.app || (window.app = {});
console.log(app);
console.log(window.app);
ainsi, si windows.app n'est pas défini, alors window.app = {} est immédiatement exécuté. Ainsi, window.app est affecté de {} lors de l'évaluation de la condition. Le résultat est donc app et window.app deviennent maintenant {}.
Object {}
Object {}
Normalement, le code JavaScript a une portée globale dans l'application. Lorsque nous déclarons une variable globale dans celle-ci, il est possible d’utiliser la même variable en double dans un autre domaine du développement à d’autres fins. En raison de cette duplication, il peut arriver une erreur. Pour que nous puissions éviter cette variable globale en utilisant immédiatement l'expression de fonction, cette expression est une expression auto-exécutable. Lorsque nous créons notre code à l'intérieur de cette variable globaleIIFEexpression sera semblable à la portée locale et à la variable locale.
Deux façons de créerIIFE
(function () {
"use strict";
var app = angular.module("myModule", []);
}());
OR
(function () {
"use strict";
var app = angular.module("myModule", []);
})();
Dans l'extrait de code ci-dessus, «var app» est maintenant une variable locale.