Fonction anonyme par rapport à la fonction normale

Juste hors d'intérêt, y at-il des différences de vitesse / fonctionnalité entre

function foo(bar) { alert("foo" + bar); } 

et

 var foo = function(bar) { alert("foo" + bar); }; 

Il n'y a pas de différence de vitesse significative. ( Test )

Il existe des différences de fonctionnalité.

  • Les déclarations de fonctions (comme la première) et les expressions de fonction (comme la seconde) sont traitées à différents moments.
  • Ils ont des effets différents sur la portée dans laquelle ils se produisent.
  • Votre première fonction a un nom réel , votre seconde n'est pas dans ES5 et antérieur, votre seconde ne l'est pas; Dans ES6 / ES2015, il le fait, car la spécification indique que le moteur de JavaScript doit attribuer le nom de la variable à la fonction dans ce cas.

Si vous recherchez la «déclaration de fonction» par rapport à «expression de fonction», vous trouverez beaucoup de discussions (certaines d'entre elles même correctes) sur le sujet.

Mais brièvement:

Déclaration de fonction

Une déclaration de fonction comme votre premier exemple se produit lorsque le curseur d'exécution entre dans sa portée contenant (contenant la fonction ou la portée globale) avant qu'un code étape par étape ne soit effectué. Par conséquent, ils ne peuvent pas apparaître dans des blocs non fonctionnels ( if , try , etc.), car aucun code étape par étape n'a été exécuté lors de leur traitement. Le nom de la fonction est ajouté à la portée dans laquelle il apparaît, et l'objet de fonction a un nom réel (bien qu'il n'y ait aucun moyen standard pour interroger ce nom, il est toujours utile dans les traces de pile et autres). (Remarque: certains moteurs JavaScript permettent des déclarations de fonction dans des blocs, mais ce n'est pas valide et ce qu'ils font n'est pas nécessairement cohérent. Ne le faites pas.)

Expression de la fonction anonyme

Une expression de fonction comme votre deuxième exemple se produit, comme toutes les expressions, lorsqu'elle se rencontre dans le flux étape par étape du code. Votre expression est appelée expression de la fonction anonyme car elle ne spécifie pas explicitement un nom pour la fonction. Dans ES5 et versions antérieures, cela signifiait que la fonction résultante n'avait aucun nom. Dans ES6 / ES2015 et plus tard, de nombreuses fonctions créées avec des expressions de fonctions anonymes ont des noms parce que le nom peut être déduit de l'expression, et c'est le cas de votre exemple, dans lequel la fonction se termine par le nom de la variable: foo . Étant donné que les expressions de la fonction anonyme sont des expressions, elles peuvent se produire partout où des expressions peuvent se produire, même si parfois vous devez avertir l'analyseur que c'est ce que vous faites.

Expression de la fonction nommée

Il existe une troisième façon de faire ceci: une expression de fonction nommée , plutôt qu'une anonyme. Ils ressemblent à ceci:

 var foo = function bar() { }; 

ou

 var obj = { foo: function bar() { } }; 

ou

 doSomething(function bar() { }); 

etc.

Ils étaient autrefois un navigateur multidisciplinaire très problématique (IE8 et plus tôt les gâchent , par exemple, les versions antérieures de Safari avaient des problèmes, etc.), Kangax a une bonne page des problèmes qui abondaient). C'est une expression, donc c'est valable partout où il y a une expression. Le nom de la fonction ( bar dans mon exemple) n'est pas ajouté à la portée contenant un moteur JavaScript compatible.