web-dev-qa-db-fra.com

JavaScript avancé: pourquoi cette fonction est-elle entourée de parenthèses?

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

Je suis tombé sur ce morceau de code JavaScript, mais je ne sais pas quoi en tirer. Pourquoi est-ce que j'obtiens "1" lorsque j'exécute ce code? Qu'est-ce que cette étrange petite annexe de (1) et pourquoi la fonction est-elle enveloppée de parenthèses?

(function(x){
    delete x;
    return x;
})(1);
javascriptfunctionsyntaxparenthesesiife
114
nerdess

Il se passe quelques choses ici. Le premier est le modèle expression de fonction immédiatement invoquée (IIFE):

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

Cela permet d'exécuter du code JavaScript dans sa propre portée. Il est généralement utilisé pour que les variables créées dans la fonction n'affectent pas la portée globale. Vous pouvez utiliser ceci à la place:

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

Mais cela nécessite de donner un nom à la fonction, ce qui n'est pas toujours nécessaire. L'utilisation d'une fonction nommée signifie également qu'à un moment donné, la fonction pourrait être appelée à nouveau, ce qui pourrait ne pas être souhaitable. En utilisant une fonction anonyme de cette manière, vous vous assurez qu'elle n'est exécutée qu'une seule fois.

Cette syntaxe n'est pas valide:

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

Parce que vous devez encapsuler la fonction entre parenthèses afin de la faire analyser comme une expression. Plus d'informations sont ici: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Donc, pour récapituler rapidement sur le modèle IIFE:

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

Permet à `` du code '' d'être exécuté immédiatement, comme s'il venait d'être écrit en ligne, mais également dans son propre champ d'application afin de ne pas affecter l'espace de noms global (et ainsi potentiellement interférer avec ou être perturbé par d'autres scripts).

Vous pouvez passer des arguments à votre fonction comme vous le feriez pour une fonction normale, par exemple,

(function(x) {
  // Some code
})(1);

Nous passons donc la valeur "1" comme premier argument à la fonction, qui la reçoit sous la forme d'une variable de portée locale, nommée x.

Deuxièmement, vous avez le courage du code de fonction lui-même:

delete x;
return x;

L'opérateur de suppression supprimera les propriétés des objets. Il ne supprime pas les variables. Alors;

var foo = {'bar':4, 'baz':5};
delete foo.bar;
console.log(foo);

Résultats dans cette journalisation:

{'baz':5}

Tandis que,

var foo = 4;
delete foo;
console.log(foo);

enregistrera la valeur 4, car foo est une variable et non une propriété et ne peut donc pas être supprimée.

Beaucoup de gens supposent que la suppression peut supprimer des variables, en raison du fonctionnement des autoglobales. Si vous attribuez à une variable sans la déclarer au préalable, elle ne deviendra pas réellement une variable, mais une propriété sur l'objet global:

bar = 4; // Note the lack of 'var'. Bad practice! Don't ever do this!
delete bar;
console.log(bar); // Error - bar is not defined.

Cette fois, la suppression fonctionne, car vous ne supprimez pas une variable, mais une propriété sur l'objet global. En effet, l'extrait précédent équivaut à ceci:

window.bar = 4;
delete window.bar;
console.log(window.bar);

Et maintenant, vous pouvez voir comment il est analogue à l'exemple d'objet foo et non à l'exemple de variable foo.

234
Howard

Cela signifie que vous avez créé une fonction anonyme et que vous l'appelez avec le paramètre 1.

C'est la même chose que:

function foo(x) {
    delete x;
    return x;
}
foo(1);
11
xdazz

Les gens appellent normalement ces "expressions de fonction immédiatement appelées" ou "fonctions d'auto-exécution".

Le but de cela est que les variables déclarées à l'intérieur de cette fonction ne fuient pas vers l'extérieur.

2
hugomg

La raison pour laquelle vous obtenez toujours 1 renvoyé est que le mot-clé delete sert à supprimer les propriétés des objets . Le reste est comme d'autres l'ont commenté, tout ce qui est entouré de crochets s'exécute en tant que fonction, et le deuxième ensemble de crochets sont les arguments passés à ce bloc.

Voici le référence MDN pour supprimer , et le référence MDN pour les fermetures , qui traite également des fonctions anonymes.

2
dmp