web-dev-qa-db-fra.com

Déclaration de fonction comme var au lieu de fonction

De plus en plus, je vois des fonctions déclarées comme

var foo = function() {

    // things
};

Au lieu de la façon dont j'avais appris, comme

function foo() {

    // things
}

Quelle est la différence? Meilleure performance? Portée? Dois-je utiliser cette méthode?

javascriptfunctions
28
Steve Robbins

var foo = function() {} définit une variable qui fait référence à une fonction anonyme.

function foo() {} définit une fonction nommée foo.

L'un ou l'autre peut être passé par nom en tant que paramètres de fonction et l'un ou l'autre peut être instancié si l'utilisation prévue est pour la POO.

À la fin de la journée, celui que vous utilisez est largement dicté par votre cas d'utilisation spécifique (Javascript est amusant comme ça;)). Si vous finissez par utiliser le premier, je voudrais fortement suggérer de nommer la fonction:

var foo = function MY_function() {}. Cette convention de dénomination aide votre pile d'appels du débogueur à ne pas être inutile.

25
Demian Brecht

expression de fonction:

//someFunction(); //wouldn't work when uncommented
var someFunction = function(){ alert('yay'); };

L'expression func dans ce cas est anonyme mais affectée à une var pour référence. Ceci est différent d'une instruction de fonction étiquetée des manières suivantes:

  • il ne peut pas être hissé (appelé avant qu'il ne soit défini)
  • new someFunction().constructor.name === 'someFunction';//false les instances n'obtiennent pas le nom var pour constructor.name car une référence à la fonction est affectée au var mais le var, pas la fonction, est lié au nom var

Dans une déclaration de fonction étiquetée:

//someFunction(); //works when uncommented
function someFunction(){ alert('yay'); }
  • travaux de levage
  • new someFunction().constructor.name === 'someFunction'; //true le nom est directement lié à la fonction.

De manière générale, il n'y a pas vraiment de bonne raison de faire de l'expression à var, sauf si vous voulez que les appels échouent si les choses bougent ou si vous définissez/attribuez une méthode sur une seule ligne. En fait, je trouve que le levage est utile pour organiser les objets avec des définitions de fonctions et de méthodes internes en bas afin que je puisse obtenir le comportement réel de l'objet et faire des définitions de méthodes publiques sur une ligne (en affectant simplement des fonctions à this. Avec le même nom) tout en un pour faciliter la consultation. Vous devez toujours essayer d'utiliser des instructions étiquetées pour les constructeurs, IMO, afin de pouvoir identifier le "type" d'un objet via son constructeur.

13
Erik Reppen

Votre premier exemple est une expression tandis que le deuxième exemple est une instruction . La définition de fonctions en tant qu'expressions permet une plus grande flexibilité quant à l'endroit où la définition peut se produire, à quoi vous pouvez l'affecter, que vous pouvez la passer en tant que paramètre, etc.

Par exemple:

SomeThing('abc', function(a,b) {return a*b;});

contre...

function tmp(a,b) { 
    return a*b;
}

SomeThing('abc', tmp);

Des exemples plus complexes deviendraient évidemment compliqués sans la syntaxe d'expression de fonction.

Regardez https://stackoverflow.com/questions/111102/how-do-javascript-closures-work

8
gahooa

La principale différence pratique est le levage. Par exemple:

foo(); // alerts 'hello'
function foo() {alert('hello');}

contre

foo(); // throws an error since foo is undefined
var foo = function() {alert('hello');}

En outre, il s'agit d'un comportement indéfini

function foo(){
  if (true) {
    function bar(){}
  }
  bar();
}

alors que c'est ok.

function foo(){
  if (true) {
    var bar = function(){}
  }
  bar();
}
4
Austin