Question Quelle est la différence entre une expression de fonction et une déclaration en JavaScript? [dupliquer]


Cette question a déjà une réponse ici:

Quelle est la différence entre les lignes de code suivantes?

//Function declaration
function foo() { return 5; }

//Anonymous function expression
var foo = function() { return 5; }

//Named function expression
var foo = function foo() { return 5; }
  • Qu'est-ce qu'une expression de fonction nommée / anonyme?
  • Qu'est-ce qu'une fonction déclarée?
  • Comment les navigateurs traitent-ils ces constructions différemment?

Que font les réponses à une question similaire (var functionName = fonction () {} vs fonction nomFonction () {}) ne pas avoir exactement raison?


429
2018-06-18 15:32


origine


Réponses:


Ils sont vraiment similaires. La façon dont vous les appelez est exactement la même. La différence réside dans la façon dont le navigateur les charge dans le contexte d'exécution.

Les déclarations de fonction sont chargées avant l'exécution de tout code.

Les expressions de fonction se chargent uniquement lorsque l'interpréteur atteint cette ligne de code.

Donc, si vous essayez d'appeler une expression de fonction avant qu'elle ne soit chargée, vous obtiendrez une erreur! Si vous appelez une déclaration de fonction à la place, cela fonctionnera toujours car aucun code ne peut être appelé tant que toutes les déclarations ne sont pas chargées.

Exemple: expression de fonction

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; } 

Exemple: déclaration de fonction

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; } 


En ce qui concerne la deuxième partie de votre question:

var foo = function foo() { return 5; } est vraiment le même que les deux autres. C'est juste que cette ligne de code provoquait une erreur dans Safari, bien qu'elle ne le fasse plus.


361
2017-07-27 14:00



Déclaration de fonction

function foo() { ... }

En raison de fonction de levage, la fonction ainsi déclarée peut être appelée à la fois après et avant la définition.

Expression de fonction

  1. Expression de la fonction nommée

    var foo = function bar() { ... }
    
  2. Expression de la fonction anonyme

    var foo = function() { ... }
    

foo() peut être appelé seulement après la création.

Expression de fonction invoquée immédiatement (IIFE)

(function() { ... }());

Conclusion

Crockford recommande d'utiliser l'expression de la fonction car elle indique clairement que foo est une variable contenant une valeur de fonction. Eh bien, personnellement, je préfère utiliser la déclaration à moins qu'il y ait une raison pour l'expression.


87
2017-11-20 20:02



Concernant la 3ème définition:

var foo = function foo() { return 5; }

Heres un exemple qui montre comment utiliser la possibilité d'appel récursif:

a = function b(i) { 
  if (i>10) {
    return i;
  }
  else {
    return b(++i);
  }
}

console.log(a(5));  // outputs 11
console.log(a(10)); // outputs 11
console.log(a(11)); // outputs 11
console.log(a(15)); // outputs 15

Modifier: exemple plus intéressant avec les fermetures:

a = function(c) {
 return function b(i){
  if (i>c) {
   return i;
  }
  return b(++i);
 }
}
d = a(5);
console.log(d(3)); // outputs 6
console.log(d(8)); // outputs 8

19
2018-02-08 10:49



La première déclaration dépend du contexte dans lequel elle est déclarée.

S'il est déclaré dans le contexte global, il créera une variable globale implicite appelée "foo" qui sera une variable pointant vers la fonction. Ainsi, l'appel de fonction "foo ()" peut être effectué n'importe où dans votre programme javascript.

Si la fonction est créée dans une fermeture, elle créera une variable locale implicite appelée "foo" que vous pourrez ensuite utiliser pour appeler la fonction dans la fermeture avec "foo ()"

MODIFIER:

J'aurais aussi dû dire que les instructions de fonction (la première) sont analysées avant les expressions de fonction (les 2 autres). Cela signifie que si vous déclarez la fonction au bas de votre script, vous pourrez toujours l'utiliser en haut. Les expressions de fonction ne sont évaluées que lorsqu'elles sont touchées par le code d'exécution.

END EDIT

Les énoncés 2 et 3 sont à peu près équivalents les uns aux autres. Encore une fois, si elles sont utilisées dans le contexte global, elles créeront des variables globales et si elles sont utilisées dans une fermeture, elles créeront des variables locales. Cependant, il vaut la peine de noter que l'instruction 3 ignorera le nom de la fonction, si bien que vous pourriez appeler la fonction n'importe quoi. Donc

var foo = function foo() { return 5; }

Est le même que

var foo = function fooYou() { return 5; }

10
2018-06-18 16:04



Bien que la différence complète soit plus compliquée, la seule différence qui me concerne est lorsque la machine crée l'objet fonction. Ce qui dans le cas des déclarations est avant qu'une instruction soit exécutée mais après qu'un corps d'instruction soit invoqué (que ce soit le corps de code global ou une sous-fonction), et dans le cas d'expressions, quand l'instruction est exécutée. À part cela, les navigateurs les traitent de la même manière.

Pour vous aider à comprendre, jetez un oeil à cette performance tester qui a cassé une hypothèse que j'avais faite de fonctions déclarées en interne ne nécessitant pas d'être recréée par la machine lorsque la fonction externe est invoquée. Dommage aussi car j'ai aimé écrire du code de cette façon.


1
2018-06-07 09:35