J'ai récemment commencé à maintenir le code JavaScript de quelqu'un d'autre. Je corrige des bugs, j'ajoute des fonctionnalités et j'essaie également de ranger le code et de le rendre plus cohérent.

Le développeur précédent a utilisé deux façons de déclarer des fonctions et je ne peux pas déterminer s'il y a une raison ou non.

Les deux manières sont:

var functionOne = function() {
    // Some code
};

function functionTwo() {
    // Some code
}

Quelles sont les raisons d'utiliser ces deux méthodes différentes et quels sont les avantages et les inconvénients de chacune? Y a-t-il quelque chose qui peut être fait avec une méthode qui ne peut pas être fait avec l'autre?

La différence est qu'il functionOnes'agit d'une expression de fonction et donc uniquement définie lorsque cette ligne est atteinte, alors qu'il functionTwos'agit d'une déclaration de fonction et est définie dès que sa fonction ou son script environnant est exécuté (en raison d'un hissage ).

Par exemple, une expression de fonction:

// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
  console.log("Hello!");
};

Et, une déclaration de fonction:

// Outputs: "Hello!"
functionTwo();

function functionTwo() {
  console.log("Hello!");
}

Historiquement, les déclarations de fonctions définies dans les blocs étaient gérées de manière incohérente entre les navigateurs. Le mode strict (introduit dans ES5) a résolu ce problème en délimitant les déclarations de fonction dans leur bloc englobant.

'use strict';    
{ // note this block!
  function functionThree() {
    console.log("Hello!");
  }
}
functionThree(); // ReferenceError

Je veux d'abord corriger Greg: function abc(){}est également abcdélimité - le nom est défini dans la portée où cette définition est rencontrée. Exemple:

function xyz(){
  function abc(){};
  // abc is defined here...
}
// ...but not here

Deuxièmement, il est possible de combiner les deux styles:

var xyz = function abc(){};

xyzva être défini comme d'habitude, abcn'est pas défini dans tous les navigateurs, mais Internet Explorer - ne comptez pas sur sa définition. Mais il sera défini à l'intérieur de son corps:

var xyz = function abc(){
  // xyz is visible here
  // abc is visible here
}
// xyz is visible here
// abc is undefined here

Si vous souhaitez alias des fonctions sur tous les navigateurs, utilisez ce type de déclaration:

function abc(){};
var xyz = abc;

Dans ce cas, les deux xyzet abcsont des alias du même objet:

console.log(xyz === abc); // prints "true"

Une raison impérieuse d'utiliser le style combiné est l'attribut "nom" des objets fonction ( non pris en charge par Internet Explorer ). Fondamentalement, lorsque vous définissez une fonction comme

function abc(){};
console.log(abc.name); // prints "abc"

son nom est automatiquement attribué. Mais quand vous le définissez comme

var abc = function(){};
console.log(abc.name); // prints ""

son nom est vide - nous avons créé une fonction anonyme et l'avons assignée à une variable.

Une autre bonne raison d'utiliser le style combiné est d'utiliser un nom interne court pour se référer à lui-même, tout en fournissant un nom long et non conflictuel aux utilisateurs externes:

// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
  // Let it call itself recursively:
  shortcut(n - 1);
  // ...
  // Let it pass itself as a callback:
  someFunction(shortcut);
  // ...
}

Dans l'exemple ci-dessus, nous pouvons faire de même avec un nom externe, mais ce sera trop lourd (et plus lent).

(Une autre façon de se référer à lui-même est d'utiliser arguments.callee, qui est encore relativement longue et non prise en charge en mode strict.)

Au fond, JavaScript traite les deux déclarations différemment. Ceci est une déclaration de fonction:

function abc(){}

abc ici est défini partout dans le périmètre actuel:

// We can call it here
abc(); // Works

// Yet, it is defined down there.
function abc(){}

// We can call it again
abc(); // Works

En outre, il a été hissé à travers une returndéclaration:

// We can call it here
abc(); // Works
return;
function abc(){}

Il s'agit d'une expression de fonction:

var xyz = function(){};

xyz ici est défini à partir du point d'affectation:

// We can't call it here
xyz(); // UNDEFINED!!!

// Now it is defined
xyz = function(){}

// We can call it here
xyz(); // works

Déclaration de fonction vs expression de fonction est la vraie raison pour laquelle il y a une différence démontrée par Greg.

Fait amusant:

var xyz = function abc(){};
console.log(xyz.name); // Prints "abc"

Personnellement, je préfère la déclaration "expression de fonction" car de cette façon je peux contrôler la visibilité. Quand je définis la fonction comme

var abc = function(){};

Je sais que j'ai défini la fonction localement. Quand je définis la fonction comme

abc = function(){};

Je sais que je l'ai défini globalement à condition de ne le définir abcnulle part dans la chaîne des étendues. Ce style de définition est résistant même lorsqu'il est utilisé à l'intérieur eval(). Bien que la définition

function abc(){};

dépend du contexte et peut vous laisser deviner où il est réellement défini, en particulier dans le cas de eval()- la réponse est: cela dépend du navigateur.

Voici le récapitulatif des formulaires standard qui créent des fonctions: (Initialement écrit pour une autre question, mais adapté après avoir été déplacé dans la question canonique.)

Termes:

• ES5 : ECMAScript 5e édition , 2009
• ES2015 : ECMAScript 2015 (également appelé "ES6")

La liste rapide:

• Déclaration de fonction

• functionExpression "anonyme" (qui malgré le terme, crée parfois des fonctions avec des noms)

• functionExpression nommée

• Initialiseur de fonction d'accesseur (ES5 +)

• Expression de fonction de flèche (ES2015 +) (qui, comme les expressions de fonction anonymes, n'implique pas de nom explicite et peut néanmoins créer des fonctions avec des noms)

• Déclaration de méthode dans l'initialiseur d'objet (ES2015 +)

• Déclarations de constructeur et de méthode dans class(ES2015 +)

Déclaration de fonction

Le premier formulaire est une déclaration de fonction , qui ressemble à ceci:

function x() {
    console.log('x');
}

Une déclaration de fonction est une déclaration ; ce n'est pas une déclaration ou une expression. En tant que tel, vous ne le suivez pas avec un; (bien que cela soit inoffensif).

Une déclaration de fonction est traitée lorsque l'exécution entre dans le contexte dans lequel elle apparaît, avant l' exécution de tout code étape par étape. La fonction qu'elle crée reçoit un nom propre (x dans l'exemple ci-dessus), et ce nom est placé dans la portée dans laquelle la déclaration apparaît.

Parce qu'il est traité avant tout code étape par étape dans le même contexte, vous pouvez faire des choses comme ceci:

x(); // Works even though it's above the declaration
function x() {
    console.log('x');
}

Jusqu'à ES2015, la spécification ne couvre pas ce que l' intérieur d' une structure de contrôle comme un moteur JavaScript doit faire si vous mettez une déclaration de fonction try, if, switch, while, etc., comme ceci:

if (someCondition) {
    function foo() {    // <===== HERE THERE
    }                   // <===== BE DRAGONS
}

Et comme ils sont traités avant l' exécution du code étape par étape, il est difficile de savoir quoi faire lorsqu'ils sont dans une structure de contrôle.

Bien que cela n'ait pas été spécifié avant ES2015, c'était une extension autorisée pour prendre en charge les déclarations de fonction dans les blocs. Malheureusement (et inévitablement), différents moteurs ont fait des choses différentes.

Depuis ES2015, la spécification indique ce qu'il faut faire. En fait, cela donne trois choses distinctes à faire:

1. Si en mode lâche pas sur un navigateur Web, le moteur JavaScript est censé faire une chose
2. Si en mode lâche sur un navigateur Web, le moteur JavaScript est censé faire autre chose
3. Si en mode strict (navigateur ou non), le moteur JavaScript est censé faire encore autre chose

Les règles pour les modes lâches sont délicates, mais en mode strict , les déclarations de fonctions dans les blocs sont faciles: elles sont locales au bloc (elles ont une portée de bloc , qui est également nouvelle dans ES2015), et elles sont hissées vers le haut du bloc. Donc:

"use strict";
if (someCondition) {
    foo();               // Works just fine
    function foo() {
    }
}
console.log(typeof foo); // "undefined" (`foo` is not in scope here
                         // because it's not in the same block)

functionExpression "anonyme"

La deuxième forme courante est appelée une expression de fonction anonyme :

var y = function () {
    console.log('y');
};

Comme toutes les expressions, il est évalué lorsqu'il est atteint lors de l'exécution pas à pas du code.

Dans ES5, la fonction ainsi créée n'a pas de nom (elle est anonyme). Dans ES2015, la fonction se voit attribuer un nom si possible en le déduisant du contexte. Dans l'exemple ci-dessus, le nom serait y. Quelque chose de similaire est fait lorsque la fonction est la valeur d'un initialiseur de propriété. (Pour plus de détails sur le moment où cela se produit et les règles, recherchez SetFunctionNamedans la spécification  - elle apparaît partout .)

functionExpression nommée

La troisième forme est une expression de fonction nommée ("NFE"):

var z = function w() {
    console.log('zw')
};

La fonction ainsi créée porte un nom propre ( wdans ce cas). Comme toutes les expressions, cela est évalué lorsqu'il est atteint lors de l'exécution pas à pas du code. Le nom de la fonction n'est pas ajouté à la portée dans laquelle l'expression apparaît; le nom est dans la portée de la fonction elle-même:

var z = function w() {
    console.log(typeof w); // "function"
};
console.log(typeof w);     // "undefined"

Notez que les NFE ont souvent été une source de bogues pour les implémentations JavaScript. IE8 et les versions antérieures, par exemple, gèrent les NFE de manière complètement incorrecte , créant deux fonctions différentes à deux moments différents. Les premières versions de Safari avaient également des problèmes. La bonne nouvelle est que les versions actuelles des navigateurs (IE9 et plus, Safari actuel) n'ont plus ces problèmes. (Mais à ce jour, malheureusement, IE8 reste largement utilisé, et donc l'utilisation d'ENF avec du code pour le Web en général reste problématique.)

Initialiseur de fonction d'accesseur (ES5 +)

Parfois, les fonctions peuvent passer inaperçues en grande partie; c'est le cas des fonctions d'accesseur . Voici un exemple:

var obj = {
    value: 0,
    get f() {
        return this.value;
    },
    set f(v) {
        this.value = v;
    }
};
console.log(obj.f);         // 0
console.log(typeof obj.f);  // "number"

Notez que lorsque j'ai utilisé la fonction, je ne l'ai pas utilisée ()! C'est parce que c'est une fonction d'accesseur pour une propriété. Nous obtenons et définissons la propriété de la manière normale, mais en arrière-plan, la fonction est appelée.

Vous pouvez également créer des accesseurs fonctions avec Object.defineProperty, Object.definePropertieset le second argument moins connu pour Object.create.

Expression de la fonction flèche (ES2015 +)

ES2015 nous apporte la fonction flèche . Voici un exemple:

var a = [1, 2, 3];
var b = a.map(n => n * 2);
console.log(b.join(", ")); // 2, 4, 6

Vous voyez cette n => n * 2chose qui se cache dans l' map()appel? C'est une fonction.

Quelques choses sur les fonctions fléchées:

1. Ils n'ont pas les leurs this. Au lieu de cela, ils près sur le thisdu contexte dans lequel elles sont définies. (Ils se ferment également argumentset, le cas échéant,. super) Cela signifie que l' thisintérieur d'eux est le même que l' thisendroit où ils ont été créés et ne peut pas être modifié.

2. Comme vous l'avez remarqué avec ce qui précède, vous n'utilisez pas le mot-clé function; à la place, vous utilisez =>.

L' n => n * 2exemple ci-dessus en est une forme. Si vous avez plusieurs arguments pour passer la fonction, vous utilisez des parens:

var a = [1, 2, 3];
var b = a.map((n, i) => n * i);
console.log(b.join(", ")); // 0, 2, 6

(N'oubliez pas que Array#mappasse l'entrée comme premier argument et l'index comme deuxième.)

Dans les deux cas, le corps de la fonction n'est qu'une expression; la valeur de retour de la fonction sera automatiquement le résultat de cette expression (vous n'utilisez pas d'explicite return).

Si vous faites plus qu'une simple expression, utilisez {}et une explicite return(si vous devez retourner une valeur), comme d'habitude:

var a = [
  {first: "Joe", last: "Bloggs"},
  {first: "Albert", last: "Bloggs"},
  {first: "Mary", last: "Albright"}
];
a = a.sort((a, b) => {
  var rv = a.last.localeCompare(b.last);
  if (rv === 0) {
    rv = a.first.localeCompare(b.first);
  }
  return rv;
});
console.log(JSON.stringify(a));

La version sans { ... }est appelée fonction de flèche avec un corps d'expression ou un corps concis . (Aussi: Une fonction de flèche concise .) Celui qui { ... }définit le corps est une fonction de flèche avec un corps de fonction . (Aussi: Une fonction de flèche verbeuse .)

Déclaration de méthode dans l'initialiseur d'objet (ES2015 +)

ES2015 permet une forme plus courte de déclaration d'une propriété qui fait référence à une fonction appelée définition de méthode ; cela ressemble à ceci:

var o = {
    foo() {
    }
};

le quasi-équivalent dans ES5 et les versions antérieures serait:

var o = {
    foo: function foo() {
    }
};

la différence (autre que la verbosité) est qu'une méthode peut utiliser super, mais pas une fonction. Ainsi, par exemple, si vous aviez un objet qui définissait (disons) en valueOfutilisant la syntaxe de la méthode, il pourrait utiliser super.valueOf()pour obtenir la valeur Object.prototype.valueOfserait retourné (avant de faire probablement autre chose avec lui), alors que la version ES5 devrait le faire à la Object.prototype.valueOf.call(this)place.

Cela signifie également que la méthode a une référence à l'objet sur lequel elle a été définie, donc si cet objet est temporaire (par exemple, vous le transmettez Object.assigncomme l'un des objets source), la syntaxe de la méthode pourrait signifier que l'objet est conservé en mémoire alors qu'il aurait pu être récupéré (si le moteur JavaScript ne détecte pas cette situation et ne la gère si aucune des méthodes ne l'utilise super).

Déclarations de constructeur et de méthode dans class(ES2015 +)

ES2015 nous apporte la classsyntaxe, y compris les constructeurs et méthodes déclarés:

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }
}

Il y a deux déclarations de fonction ci-dessus: une pour le constructeur, qui obtient le nom Person, et une pour getFullName, qui est une fonction affectée à Person.prototype.

En parlant du contexte global, à la fois, l' varinstruction et un FunctionDeclarationà la fin créeront une propriété non supprimable sur l'objet global, mais la valeur des deux peut être écrasée .

La différence subtile entre les deux façons est que lorsque le processus d' instanciation variable s'exécute (avant l'exécution du code réel) tous les identifiants déclarés avec varseront initialisés avec undefined, et ceux utilisés par les FunctionDeclarationseront disponibles depuis ce moment, par exemple:

 alert(typeof foo); // 'function', it's already available
 alert(typeof bar); // 'undefined'
 function foo () {}
 var bar = function () {};
 alert(typeof bar); // 'function'

L'affectation du bar FunctionExpressionse déroule jusqu'à l'exécution.

Une propriété globale créée par un FunctionDeclarationpeut être remplacée sans aucun problème comme une valeur de variable, par exemple:

 function test () {}
 test = null;

Une autre différence évidente entre vos deux exemples est que la première fonction n'a pas de nom, mais la seconde l'a, ce qui peut être très utile lors du débogage (c'est-à-dire inspecter une pile d'appels).

À propos de votre premier exemple modifié (foo = function() { alert('hello!'); }; ), il s'agit d'une affectation non déclarée, je vous encourage vivement à toujours utiliser le varmot - clé.

Avec une mission, sans var instruction, si l'identifiant référencé ne se trouve pas dans la chaîne de portée, il deviendra une propriété supprimable de l'objet global.

En outre, les affectations non déclarées jettent un ReferenceError ECMAScript 5 en mode strict .

À lire absolument:

• Expressions de fonction nommées démystifiées

Remarque : Cette réponse a été fusionnée à partir d' une autre question , dans laquelle le doute majeur et l'idée fausse du PO étaient que les identifiants déclarés avec un FunctionDeclarationne pouvaient pas être remplacés, ce qui n'est pas le cas.

Les deux extraits de code que vous y avez publiés se comporteront, à presque toutes les fins, de la même manière.

Cependant, la différence de comportement est qu'avec la première variante ( var functionOne = function() {}), cette fonction ne peut être appelée qu'après ce point dans le code.

Avec la deuxième variante ( function functionTwo()), la fonction est disponible pour le code qui s'exécute au-dessus de l'endroit où la fonction est déclarée.

En effet, avec la première variante, la fonction est affectée à la variable fooau moment de l'exécution. Dans le second, la fonction est affectée à cet identifiant foo, au moment de l'analyse.

Plus d'informations techniques

JavaScript a trois façons de définir les fonctions.

1. Votre premier extrait de code affiche une expression de fonction . Cela implique l'utilisation de l' opérateur "fonction" pour créer une fonction - le résultat de cet opérateur peut être stocké dans n'importe quelle variable ou propriété d'objet. L'expression de fonction est puissante de cette façon. L'expression de fonction est souvent appelée "fonction anonyme", car elle n'a pas besoin d'avoir de nom,
2. Votre deuxième exemple est une déclaration de fonction . Cela utilise l' instruction "function" pour créer une fonction. La fonction est disponible au moment de l'analyse et peut être appelée n'importe où dans cette étendue. Vous pouvez toujours le stocker ultérieurement dans une propriété de variable ou d'objet.
3. La troisième façon de définir une fonction est le constructeur "Function ()" , qui n'est pas montré dans votre message d'origine. Il n'est pas recommandé de l'utiliser car il fonctionne de la même manière que eval(), ce qui a ses problèmes.

Une meilleure explication à la réponse de Greg

functionTwo();
function functionTwo() {
}

Pourquoi pas d'erreur? On nous a toujours appris que les expressions sont exécutées de haut en bas (??)

Parce que:

Les déclarations de fonctions et les déclarations de variables sont toujours déplacées ( hoisted) de manière invisible en haut de leur portée contenante par l'interpréteur JavaScript. Les paramètres de fonction et les noms définis par le langage sont évidemment déjà là. ben cherry

Cela signifie que le code comme celui-ci:

functionOne();                  ---------------      var functionOne;
                                | is actually |      functionOne();
var functionOne = function(){   | interpreted |-->
};                              |    like     |      functionOne = function(){
                                ---------------      };

Notez que la partie affectation des déclarations n'a pas été hissée. Seul le nom est hissé.

Mais dans le cas des déclarations de fonctions, tout le corps de la fonction sera également hissé :

functionTwo();              ---------------      function functionTwo() {
                            | is actually |      };
function functionTwo() {    | interpreted |-->
}                           |    like     |      functionTwo();
                            ---------------

D'autres commentateurs ont déjà couvert la différence sémantique des deux variantes ci-dessus. Je voulais noter une différence stylistique: seule la variation "affectation" peut définir une propriété d'un autre objet.

Je construis souvent des modules JavaScript avec un modèle comme celui-ci:

(function(){
    var exports = {};

    function privateUtil() {
            ...
    }

    exports.publicUtil = function() {
            ...
    };

    return exports;
})();

Avec ce modèle, vos fonctions publiques utiliseront toutes l'affectation, tandis que vos fonctions privées utiliseront la déclaration.

(Notez également que l'affectation doit nécessiter un point-virgule après l'instruction, tandis que la déclaration l'interdit.)

Une illustration de quand préférer la première méthode à la seconde est quand vous devez éviter de remplacer les définitions précédentes d'une fonction.

Avec

if (condition){
    function myfunction(){
        // Some code
    }
}

, cette définition de myfunctionremplacera toute définition précédente, car elle sera effectuée au moment de l'analyse.

Tandis que

if (condition){
    var myfunction = function (){
        // Some code
    }
}

fait le travail correct de définir myfunctionuniquement quand conditionest atteint.

Une raison importante est d'ajouter une et une seule variable comme "racine" de votre espace de noms ...

var MyNamespace = {}
MyNamespace.foo= function() {

}

ou

var MyNamespace = {
  foo: function() {
  },
  ...
}

Il existe de nombreuses techniques d'espacement de noms. C'est devenu plus important avec la pléthore de modules JavaScript disponibles.

Voir aussi Comment déclarer un espace de noms en JavaScript?

Le levage est l'action de l'interpréteur JavaScript de déplacer toutes les déclarations de variables et de fonctions en haut de la portée actuelle.

Cependant, seules les déclarations réelles sont hissées. en laissant les affectations là où elles sont.

• Les variables / fonctions déclarées à l'intérieur de la page sont globales et peuvent y accéder n'importe où dans cette page.
• Les fonctions / variables déclarées à l'intérieur de la fonction ont une portée locale. signifie qu'ils sont disponibles / accessibles à l'intérieur du corps de la fonction (portée), ils ne sont pas disponibles à l'extérieur du corps de la fonction.

Variable

Javascript est appelé langage peu typé. Ce qui signifie que les variables Javascript peuvent contenir la valeur de n'importe quel type de données . Javascript prend automatiquement en charge la modification du type de variable en fonction de la valeur / du littéral fourni lors de l'exécution.

global_Page = 10;                                               var global_Page;      « undefined
    « Integer literal, Number Type.   -------------------       global_Page = 10;     « Number         
global_Page = 'Yash';                 |   Interpreted   |       global_Page = 'Yash'; « String
    « String literal, String Type.    «       AS        «       global_Page = true;   « Boolean 
var global_Page = true;               |                 |       global_Page = function (){          « function
    « Boolean Type                    -------------------                 var local_functionblock;  « undefined
global_Page = function (){                                                local_functionblock = 777;« Number
    var local_functionblock = 777;                              };  
    // Assigning function as a data.
};  

Une fonction

function Identifier_opt ( FormalParameterList_opt ) { 
      FunctionBody | sequence of statements

      « return;  Default undefined
      « return 'some data';
}

• les fonctions déclarées à l'intérieur de la page sont hissées en haut de la page ayant un accès global.
• les fonctions déclarées à l'intérieur du bloc fonction sont hissées en haut du bloc.

• La valeur de retour par défaut de la fonction est « non définie », la valeur par défaut de la déclaration de variable est également «non définie»

  Scope with respect to function-block global. 
  Scope with respect to page undefined | not available.

Déclaration de fonction

function globalAccess() {                                  function globalAccess() {      
}                                  -------------------     }
globalAccess();                    |                 |     function globalAccess() { « Re-Defined / overridden.
localAccess();                     «   Hoisted  As   «         function localAccess() {
function globalAccess() {          |                 |         }
     localAccess();                -------------------         localAccess(); « function accessed with in globalAccess() only.
     function localAccess() {                              }
     }                                                     globalAccess();
}                                                          localAccess(); « ReferenceError as the function is not defined

Expression de fonction

        10;                 « literal
       (10);                « Expression                (10).toString() -> '10'
var a;                      
    a = 10;                 « Expression var              a.toString()  -> '10'
(function invoke() {        « Expression Function
 console.log('Self Invoking');                      (function () {
});                                                               }) () -> 'Self Invoking'

var f; 
    f = function (){        « Expression var Function
    console.log('var Function');                                   f ()  -> 'var Function'
    };

Fonction affectée à la variable Exemple:

(function selfExecuting(){
    console.log('IIFE - Immediately-Invoked Function Expression');
}());

var anonymous = function (){
    console.log('anonymous function Expression');
};

var namedExpression = function for_InternalUSE(fact){
    if(fact === 1){
        return 1;
    }

    var localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    //return; //undefined.
    return fact * for_InternalUSE( fact - 1);   
};

namedExpression();
globalExpression();

javascript interprété comme

var anonymous;
var namedExpression;
var globalExpression;

anonymous = function (){
    console.log('anonymous function Expression');
};

namedExpression = function for_InternalUSE(fact){
    var localExpression;

    if(fact === 1){
        return 1;
    }
    localExpression = function(){
        console.log('Local to the parent Function Scope');
    };
    globalExpression = function(){ 
        console.log('creates a new global variable, then assigned this function.');
    };

    return fact * for_InternalUSE( fact - 1);    // DEFAULT UNDEFINED.
};

namedExpression(10);
globalExpression();

Vous pouvez vérifier la déclaration de fonction, le test d'expression sur différents navigateurs en utilisant jsperf Test Runner

ES5 Constructor Function Classes : objets de fonction créés à l'aide de Function.prototype.bind

JavaScript traite les fonctions comme des objets de première classe. En tant qu'objet, vous pouvez affecter des propriétés à une fonction.

function Shape(id) { // Function Declaration
    this.id = id;
};
    // Adding a prototyped method to a function.
    Shape.prototype.getID = function () {
        return this.id;
    };
    Shape.prototype.setID = function ( id ) {
        this.id = id;
    };

var expFn = Shape; // Function Expression

var funObj = new Shape( ); // Function Object
funObj.hasOwnProperty('prototype'); // false
funObj.setID( 10 );
console.log( funObj.getID() ); // 10

ES6 a introduit la fonction Flèche : une expression de fonction Flèche a une syntaxe plus courte, elle est mieux adaptée aux fonctions non-méthode et ne peut pas être utilisée comme constructeur.

ArrowFunction : ArrowParameters => ConciseBody.

const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; };
console.log( fn(2) ); // Even
console.log( fn(3) ); // Odd

J'ajoute ma propre réponse juste parce que tout le monde a soigneusement couvert la partie de levage.

Je me demande depuis longtemps quel est le meilleur chemin, et grâce à http://jsperf.com maintenant je sais :)

Les déclarations de fonctions sont plus rapides, et c'est ce qui compte vraiment dans le développement Web, non? ;)

Une déclaration de fonction et une expression de fonction affectées à une variable se comportent de la même manière une fois la liaison établie.

Il existe cependant une différence quant à la manière et au moment où l'objet fonction est réellement associé à sa variable. Cette différence est due au mécanisme appelé levage variable en JavaScript.

Fondamentalement, toutes les déclarations de fonctions et les déclarations de variables sont hissées au sommet de la fonction dans laquelle la déclaration se produit (c'est pourquoi nous disons que JavaScript a une portée de fonction ).

• Lorsqu'une déclaration de fonction est hissée, le corps de la fonction "suit", donc lorsque le corps de la fonction est évalué, la variable sera immédiatement liée à un objet fonction.

• Lorsqu'une déclaration de variable est hissée, l'initialisation ne suit pas , mais est "laissée pour compte". La variable est initialisée undefinedau début du corps de la fonction et se verra attribuer une valeur à son emplacement d'origine dans le code. (En fait, une valeur lui sera attribuée à chaque emplacement où se produit la déclaration d'une variable du même nom.)

L'ordre de levage est également important: les déclarations de fonctions ont priorité sur les déclarations de variables portant le même nom et la dernière déclaration de fonctions a priorité sur les déclarations de fonctions précédentes portant le même nom.

Quelques exemples...

var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10 }
  return foo; }
bar() // 10

La variable fooest hissée en haut de la fonction, initialisée à undefined, c'est-à- !foodire qu'elle est truedonc fooaffectée 10. L' fooextérieur de barla portée de ne joue aucun rôle et reste intact.

function f() {
  return a; 
  function a() {return 1}; 
  var a = 4;
  function a() {return 2}}
f()() // 2

function f() {
  return a;
  var a = 4;
  function a() {return 1};
  function a() {return 2}}
f()() // 2

Les déclarations de fonctions ont priorité sur les déclarations de variables et la dernière déclaration de fonction "colle".

function f() {
  var a = 4;
  function a() {return 1}; 
  function a() {return 2}; 
  return a; }
f() // 4

Dans cet exemple, aest initialisé avec l'objet fonction résultant de l'évaluation de la deuxième déclaration de fonction, puis est affecté 4.

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}}
b();
a // 1

Ici, la déclaration de fonction est hissée en premier, déclarant et initialisant une variable a. Ensuite, cette variable est affectée 10. En d'autres termes: l'affectation n'est pas affectée à la variable externe a.

Le premier exemple est une déclaration de fonction:

function abc(){}

Le deuxième exemple est une expression de fonction:

var abc = function() {};

La principale différence est de savoir comment ils sont hissés (levés et déclarés). Dans le premier exemple, la déclaration de fonction entière est hissée. Dans le deuxième exemple, seul le var 'abc' est hissé, sa valeur (la fonction) sera indéfinie et la fonction elle-même reste à la position où elle est déclarée.

Pour le dire simplement:

//this will work
abc(param);
function abc(){}

//this would fail
abc(param);
var abc = function() {}

Pour en savoir plus sur ce sujet, je vous recommande fortement ce lien

En termes de coût de maintenance du code, les fonctions nommées sont plus préférables:

• Indépendant de l'endroit où ils sont déclarés (mais toujours limité par la portée).
• Plus résistant aux erreurs comme l'initialisation conditionnelle (vous pouvez toujours remplacer si vous le souhaitez).
• Le code devient plus lisible en allouant des fonctions locales séparément de la fonctionnalité de portée. Habituellement, dans la portée, la fonctionnalité passe en premier, suivie des déclarations de fonctions locales.
• Dans un débogueur, vous verrez clairement le nom de la fonction sur la pile d'appels au lieu d'une fonction "anonyme / évaluée".

Je soupçonne que plus de PROS pour les fonctions nommées sont suivis. Et ce qui est répertorié comme un avantage des fonctions nommées est un inconvénient pour les fonctions anonymes.

Historiquement, les fonctions anonymes sont apparues à cause de l'incapacité de JavaScript en tant que langage à répertorier les membres avec des fonctions nommées:

{
    member:function() { /* How do I make "this.member" a named function? */
    }
}

En termes informatiques, nous parlons de fonctions anonymes et de fonctions nommées. Je pense que la différence la plus importante est qu'une fonction anonyme n'est pas liée à un nom, d'où le nom de fonction anonyme. En JavaScript, il s'agit d'un objet de première classe déclaré dynamiquement lors de l'exécution.

Pour plus d'informations sur les fonctions anonymes et le calcul lambda, Wikipedia est un bon début ( http://en.wikipedia.org/wiki/Anonymous_function ).

J'utilise l'approche variable dans mon code pour une raison très spécifique, dont la théorie a été abordée de manière abstraite ci-dessus, mais un exemple pourrait aider certaines personnes comme moi, avec une expertise JavaScript limitée.

J'ai du code que je dois exécuter avec 160 marques conçues indépendamment. La plupart du code se trouve dans des fichiers partagés, mais les éléments spécifiques à la marque se trouvent dans un fichier distinct, un pour chaque marque.

Certaines marques nécessitent des fonctions spécifiques, d'autres non. Parfois, je dois ajouter de nouvelles fonctions pour faire de nouvelles choses spécifiques à la marque. Je suis heureux de changer le codage partagé, mais je ne veux pas avoir à changer les 160 ensembles de fichiers de marque.

En utilisant la syntaxe des variables, je peux déclarer la variable (un pointeur de fonction essentiellement) dans le code partagé et soit attribuer une fonction de remplacement triviale, soit définir sur null.

Le ou les deux brandings qui ont besoin d'une implémentation spécifique de la fonction peuvent alors définir leur version de la fonction et l'affecter à la variable s'ils le souhaitent, et les autres ne font rien. Je peux tester une fonction nulle avant de l'exécuter dans le code partagé.

D'après les commentaires des gens ci-dessus, je suppose qu'il est également possible de redéfinir une fonction statique, mais je pense que la solution variable est agréable et claire.

La réponse de Greg est assez bonne, mais je voudrais quand même ajouter quelque chose que j'ai appris tout à l'heure en regardant les vidéos de Douglas Crockford .

Expression de fonction:

var foo = function foo() {};

Énoncé de fonction:

function foo() {};

L'instruction de fonction n'est qu'un raccourci pour une varinstruction avec une functionvaleur.

Donc

function foo() {};

s'étend à

var foo = function foo() {};

Qui s'étend encore à:

var foo = undefined;
foo = function foo() {};

Et ils sont tous les deux hissés en haut du code.

Il existe quatre comparaisons notables entre les deux différentes déclarations de fonctions énumérées ci-dessous.

1. Disponibilité (portée) de la fonction

Ce qui suit fonctionne car function add()est limité au bloc le plus proche:

try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

function add(a, b){
  return a + b;
}

Ce qui suit ne fonctionne pas car la variable est appelée avant qu'une valeur de fonction ne soit affectée à la variable add.

try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function(a, b){
  return a + b;
}

Le code ci-dessus a une fonctionnalité identique au code ci-dessous. Notez que l'affectation explicite add = undefinedest superflue car simplement faire var add;est exactement la même chose que var add=undefined.

var add = undefined;

try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

add = function(a, b){
  return a + b;
}

Ce qui suit ne fonctionne pas car le var add=super-ensemencement le function add().

try {
  console.log("Success: ", add(1, 1));
} catch(e) {
  console.log("ERROR: " + e);
}

var add=function add(a, b){
  return a + b;
}

2. (fonction) .name

Le nom d'une fonction function thefuncname(){}est thefuncname quand elle est déclarée de cette façon.

function foobar(a, b){}

console.log(foobar.name);

var a = function foobar(){};

console.log(a.name);

Sinon, si une fonction est déclarée comme function(){}, la fonction .name est la première variable utilisée pour stocker la fonction.

var a = function(){};
var b = (function(){ return function(){} });

console.log(a.name);
console.log(b.name);

S'il n'y a pas de variables définies pour la fonction, alors le nom des fonctions est la chaîne vide ( "").

console.log((function(){}).name === "");

Enfin, alors que la variable à laquelle la fonction est affectée définit initialement le nom, les variables successives définies sur la fonction ne changent pas le nom.

var a = function(){};
var b = a;
var c = b;

console.log(a.name);
console.log(b.name);
console.log(c.name);

3. Performance

Dans le V8 de Google et Spidermonkey de Firefox, il pourrait y avoir quelques différences de compilation JIST en quelques microsecondes, mais en fin de compte, le résultat est exactement le même. Pour le prouver, examinons l'efficacité de JSPerf aux microbenchmarks en comparant la vitesse de deux extraits de code vierges. Les tests JSPerf se trouvent ici . Et, les tests jsben.ch se trouvent ici . Comme vous pouvez le voir, il y a une différence notable quand il ne devrait pas y en avoir. Si vous êtes vraiment un monstre de performance comme moi, cela vaut peut-être mieux que vous essayiez de réduire le nombre de variables et de fonctions dans la portée et surtout d'éliminer le polymorphisme (comme utiliser la même variable pour stocker deux types différents).

4. Mutabilité variable

Lorsque vous utilisez le varmot clé pour déclarer une variable, vous pouvez ensuite réaffecter une valeur différente à la variable comme ceci.

(function(){
    "use strict";
    var foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

Cependant, lorsque nous utilisons l'instruction const, la référence de variable devient immuable. Cela signifie que nous ne pouvons pas affecter une nouvelle valeur à la variable. Veuillez noter, cependant, que cela ne rend pas le contenu de la variable immuable: si vous le faites const arr = [], vous pouvez toujours le faire arr[10] = "example". Faire seulement quelque chose comme arr = "new value"ou arr = []lancerait une erreur comme vu ci-dessous.

(function(){
    "use strict";
    const foobar = function(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

Fait intéressant, si nous déclarons la variable comme function funcName(){}, alors l'immuabilité de la variable est identique à la déclarer avec var.

(function(){
    "use strict";
    function foobar(){}; // initial value
    try {
        foobar = "Hello World!"; // new value
        console.log("[no error]");
    } catch(error) {
        console.log("ERROR: " + error.message);
    }
    console.log(foobar, window.foobar);
})();

Quel est le "bloc le plus proche"

Le "bloc le plus proche" est la "fonction" la plus proche (y compris les fonctions asynchrones, les fonctions de générateur et les fonctions de générateur asynchrone). Cependant, il est intéressant de noter qu'un a function functionName() {}se comporte comme un var functionName = function() {}élément dans un bloc sans fermeture vis-à-vis des articles en dehors de ladite fermeture. Observer.

• Ordinaire var add=function(){}

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}');
  }
} catch(e) {
  console.log("Is a block");
}
var add=function(a, b){return a + b}

• Ordinaire function add(){}

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
function add(a, b){
  return a + b;
}

• Une fonction

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(function () {
    function add(a, b){
      return a + b;
    }
})();

• Déclaration (tels que if, else, for, while, try/ catch/ finally, switch, do/ while, with)

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
{
    function add(a, b){
      return a + b;
    }
}

• Fonction flèche avec var add=function()

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    var add=function(a, b){
      return a + b;
    }
})();

• Fonction flèche avec function add()

try {
  // typeof will simply return "undefined" if the variable does not exist
  if (typeof add !== "undefined") {
    add(1, 1); // just to prove it
    console.log("Not a block");
  }else if(add===undefined){ // this throws an exception if add doesn't exist
    console.log('Behaves like var add=function(a,b){return a+b}')
  }
} catch(e) {
  console.log("Is a block");
}
(() => {
    function add(a, b){
      return a + b;
    }
})();

@EugeneLazutkin donne un exemple où il nomme une fonction assignée pour pouvoir l'utilisershortcut() comme référence interne à lui-même. John Resig donne un autre exemple: copier une fonction récursive affectée à un autre objet dans son Learning Advanced Javascript didacticiel . Bien que l'attribution de fonctions aux propriétés ne soit pas strictement la question ici, je recommande d'essayer activement le didacticiel - exécutez le code en cliquant sur le bouton dans le coin supérieur droit et double-cliquez sur le code pour le modifier à votre guise.

Exemples du tutoriel: appels récursifs dans yell() :

Les tests échouent lorsque l'objet ninja d'origine est supprimé. (page 13)

var ninja = { 
  yell: function(n){ 
    return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); 

var samurai = { yell: ninja.yell }; 
var ninja = null; 

try { 
  samurai.yell(4); 
} catch(e){ 
  assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); 
}

Si vous nommez la fonction qui sera appelée récursivement, les tests réussiront. (page 14)

var ninja = { 
  yell: function yell(n){ 
    return n > 0 ? yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); 

var samurai = { yell: ninja.yell }; 
var ninja = {}; 
assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." );

Une autre différence qui n'est pas mentionnée dans les autres réponses est que si vous utilisez la fonction anonyme

var functionOne = function() {
    // Some code
};

et l'utiliser comme constructeur comme dans

var one = new functionOne();

alors one.constructor.namene sera pas défini. Function.namen'est pas standard mais est pris en charge par Firefox, Chrome, d'autres navigateurs dérivés de Webkit et IE 9+.

Avec

function functionTwo() {
    // Some code
}
two = new functionTwo();

il est possible de récupérer le nom du constructeur sous forme de chaîne avec two.constructor.name.

La première (fonction doSomething (x)) doit faire partie d'une notation d'objet.

Le second ( var doSomething = function(x){ alert(x);}) crée simplement une fonction anonyme et l'affecte à une variable,doSomething . Donc, doSomething () appellera la fonction.

Vous voudrez peut-être savoir ce qu'une déclaration de fonction et une expression de fonction .

Une déclaration de fonction définit une variable de fonction nommée sans nécessiter d'affectation de variable. Les déclarations de fonctions se produisent en tant que constructions autonomes et ne peuvent pas être imbriquées dans des blocs non fonctionnels.

function foo() {
    return 3;
}

ECMA 5 (13.0) définit la syntaxe comme
identificateur de fonction (FormalParameterList _opt ) {FunctionBody}

Dans la condition ci-dessus, le nom de la fonction est visible dans sa portée et la portée de son parent (sinon il serait inaccessible).

Et dans une expression de fonction

Une expression de fonction définit une fonction comme faisant partie d'une syntaxe d'expression plus large (généralement une affectation de variable). Les fonctions définies via des expressions de fonctions peuvent être nommées ou anonymes. Les expressions de fonction ne doivent pas commencer par «fonction».

// Anonymous function expression
var a = function() {
    return 3;
}

// Named function expression
var a = function foo() {
    return 3;
}

// Self-invoking function expression
(function foo() {
    alert("hello!");
})();

ECMA 5 (13.0) définit la syntaxe comme
identifiant de fonction _opt (FormalParameterList _opt ) {FunctionBody}

Je liste les différences ci-dessous:

1. Une déclaration de fonction peut être placée n'importe où dans le code. Même si elle est invoquée avant que la définition n'apparaisse dans le code, elle est exécutée lorsque la déclaration de fonction est validée en mémoire ou d'une manière telle qu'elle est hissée, avant que tout autre code de la page ne commence son exécution.

   Jetez un œil à la fonction ci-dessous:

   function outerFunction() {
       function foo() {
          return 1;
       }
       return foo();
       function foo() {
          return 2;
       }
   }
   alert(outerFunction()); // Displays 2

   En effet, lors de l'exécution, il ressemble à: -

   function foo() {  // The first function declaration is moved to top
       return 1;
   }
   function foo() {  // The second function declaration is moved to top
       return 2;
   }
   function outerFunction() {
       return foo();
   }
   alert(outerFunction()); //So executing from top to bottom,
                           //the last foo() returns 2 which gets displayed

   Une expression de fonction, si elle n'est pas définie avant de l'appeler, entraînera une erreur. Ici aussi, la définition de la fonction elle-même n'est pas déplacée vers le haut ou enregistrée dans la mémoire comme dans les déclarations de fonction. Mais la variable à laquelle nous attribuons la fonction est hissée et undefined lui est assigné.

   Même fonction en utilisant des expressions de fonction:

   function outerFunction() {
       var foo = function() {
          return 1;
       }
       return foo();
       var foo = function() {
          return 2;
       }
   }
   alert(outerFunction()); // Displays 1

   En effet, lors de l'exécution, cela ressemble à:

   function outerFunction() {
      var foo = undefined;
      var foo = undefined;
   
      foo = function() {
         return 1;
      };
      return foo ();
      foo = function() {   // This function expression is not reachable
         return 2;
      };
   }
   alert(outerFunction()); // Displays 1

2. Il n'est pas sûr d'écrire des déclarations de fonctions dans des blocs non fonctionnels comme si car elles ne seront pas accessibles.

   if (test) {
       function x() { doSomething(); }
   }

3. L'expression de fonction nommée comme celle ci-dessous peut ne pas fonctionner dans les navigateurs Internet Explorer antérieurs à la version 9.

   var today = function today() {return new Date()}

Si vous utilisiez ces fonctions pour créer des objets, vous obtiendriez:

var objectOne = new functionOne();
console.log(objectOne.__proto__); // prints "Object {}" because constructor is an anonymous function

var objectTwo = new functionTwo();
console.log(objectTwo.__proto__); // prints "functionTwo {}" because constructor is a named function

À la lumière de l'argument "les fonctions nommées apparaissent dans les traces de pile", les moteurs JavaScript modernes sont en fait tout à fait capables de représenter des fonctions anonymes.

À ce jour, V8, SpiderMonkey, Chakra et Nitro se réfèrent toujours aux fonctions nommées par leurs noms. Ils se réfèrent presque toujours à une fonction anonyme par son identifiant si elle en possède une.

SpiderMonkey peut déterminer le nom d'une fonction anonyme renvoyée par une autre fonction. Le reste ne peut pas.

Si vous vouliez vraiment, vraiment que votre itérateur et vos rappels de succès apparaissent dans la trace, vous pouvez aussi les nommer ...

[].forEach(function iterator() {});

Mais pour la plupart, cela ne vaut pas la peine d'être souligné.

Harnais ( violon )

'use strict';

var a = function () {
    throw new Error();
},
    b = function b() {
        throw new Error();
    },
    c = function d() {
        throw new Error();
    },
    e = {
        f: a,
        g: b,
        h: c,
        i: function () {
            throw new Error();
        },
        j: function j() {
            throw new Error();
        },
        k: function l() {
            throw new Error();
        }
    },
    m = (function () {
        return function () {
            throw new Error();
        };
    }()),
    n = (function () {
        return function n() {
            throw new Error();
        };
    }()),
    o = (function () {
        return function p() {
            throw new Error();
        };
    }());

console.log([a, b, c].concat(Object.keys(e).reduce(function (values, key) {
    return values.concat(e[key]);
}, [])).concat([m, n, o]).reduce(function (logs, func) {

    try {
        func();
    } catch (error) {
        return logs.concat('func.name: ' + func.name + '\n' +
                           'Trace:\n' +
                           error.stack);
        // Need to manually log the error object in Nitro.
    }

}, []).join('\n\n'));

V8

func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at a (http://localhost:8000/test.js:4:11)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: b
Trace:
Error
    at b (http://localhost:8000/test.js:7:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: d
Trace:
Error
    at d (http://localhost:8000/test.js:10:15)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at e.i (http://localhost:8000/test.js:17:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: j
Trace:
Error
    at j (http://localhost:8000/test.js:20:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: l
Trace:
Error
    at l (http://localhost:8000/test.js:23:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: 
Trace:
Error
    at http://localhost:8000/test.js:28:19
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: n
Trace:
Error
    at n (http://localhost:8000/test.js:33:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27

func.name: p
Trace:
Error
    at p (http://localhost:8000/test.js:38:19)
    at http://localhost:8000/test.js:47:9
    at Array.reduce (native)
    at http://localhost:8000/test.js:44:27 test.js:42

SpiderMonkey

func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
a@http://localhost:8000/test.js:4:5
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: b
Trace:
b@http://localhost:8000/test.js:7:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: d
Trace:
d@http://localhost:8000/test.js:10:9
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
e.i@http://localhost:8000/test.js:17:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: j
Trace:
j@http://localhost:8000/test.js:20:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: l
Trace:
l@http://localhost:8000/test.js:23:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: 
Trace:
m</<@http://localhost:8000/test.js:28:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: n
Trace:
n@http://localhost:8000/test.js:33:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1


func.name: p
Trace:
p@http://localhost:8000/test.js:38:13
@http://localhost:8000/test.js:47:9
@http://localhost:8000/test.js:54:1

Chakra

func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at a (http://localhost:8000/test.js:4:5)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at b (http://localhost:8000/test.js:7:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at d (http://localhost:8000/test.js:10:9)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at e.i (http://localhost:8000/test.js:17:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at j (http://localhost:8000/test.js:20:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at l (http://localhost:8000/test.js:23:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at Anonymous function (http://localhost:8000/test.js:28:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at n (http://localhost:8000/test.js:33:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)


func.name: undefined
Trace:
Error
   at p (http://localhost:8000/test.js:38:13)
   at Anonymous function (http://localhost:8000/test.js:47:9)
   at Global code (http://localhost:8000/test.js:42:1)

Nitro

func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
a@http://localhost:8000/test.js:4:22
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: b
Trace:
b@http://localhost:8000/test.js:7:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: d
Trace:
d@http://localhost:8000/test.js:10:26
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
i@http://localhost:8000/test.js:17:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: j
Trace:
j@http://localhost:8000/test.js:20:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: l
Trace:
l@http://localhost:8000/test.js:23:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: 
Trace:
http://localhost:8000/test.js:28:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: n
Trace:
n@http://localhost:8000/test.js:33:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

func.name: p
Trace:
p@http://localhost:8000/test.js:38:30
http://localhost:8000/test.js:47:13
reduce@[native code]
global code@http://localhost:8000/test.js:44:33

En JavaScript, il existe deux façons de créer des fonctions:

1. Déclaration de fonction:

   function fn(){
     console.log("Hello");
   }
   fn();

   Ceci est très basique, explicite, utilisé dans de nombreuses langues et standard dans la famille de langues C. Nous avons déclaré qu'une fonction l'avait définie et exécutée en l'appelant.

   Ce que vous devez savoir, c'est que les fonctions sont en fait des objets en JavaScript; en interne, nous avons créé un objet pour la fonction ci-dessus et lui avons donné un nom appelé fn ou la référence à l'objet est stockée dans fn. Les fonctions sont des objets en JavaScript; une instance de fonction est en fait une instance d'objet.

2. Expression de fonction:

   var fn=function(){
     console.log("Hello");
   }
   fn();

   JavaScript a des fonctions de première classe, c'est-à-dire créer une fonction et l'affecter à une variable comme vous créez une chaîne ou un nombre et l'affectez à une variable. Ici, la variable fn est affectée à une fonction. La raison de ce concept est que les fonctions sont des objets en JavaScript; fn pointe vers l'instance d'objet de la fonction ci-dessus. Nous avons initialisé une fonction et l'avons assignée à une variable. Il ne s'agit pas d'exécuter la fonction et d'attribuer le résultat.

Référence: syntaxe de déclaration de fonction JavaScript: var fn = function () {} vs function fn () {}

Les deux sont des façons différentes de définir une fonction. La différence réside dans la façon dont le navigateur les interprète et les charge dans un contexte d'exécution.

Le premier cas est celui des expressions de fonction qui ne se chargent que lorsque l'interpréteur atteint cette ligne de code. Donc, si vous le faites comme suit, vous obtiendrez une erreur indiquant que functionOne n'est pas une fonction .

functionOne();
var functionOne = function() {
    // Some code
};

La raison en est que sur la première ligne aucune valeur n'est affectée à functionOne, et donc elle n'est pas définie. Nous essayons de l'appeler en tant que fonction, et donc nous obtenons une erreur.

Sur la deuxième ligne, nous attribuons la référence d'une fonction anonyme à functionOne.

Le deuxième cas est celui des déclarations de fonctions qui se chargent avant l'exécution de tout code. Donc, si vous aimez ce qui suit, vous n'obtiendrez aucune erreur lors du chargement de la déclaration avant l'exécution du code.

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

À propos des performances:

De nouvelles versions de V8introduit plusieurs optimisations sous le capot et ainsi de suite SpiderMonkey.

Il n'y a presque plus de différence entre expression et déclaration.
L'expression de la fonction semble être plus rapide maintenant.

Chrome 62.0.3202

FireFox 55

Chrome Canary 63.0.3225

Anonymousles expressions de fonction semblent avoir de meilleures performances par rapport à Namedl'expression de fonction.

Firefox Chrome Canary Chrome

Ils sont assez similaires avec quelques petites différences, la première est une variable qui est affectée à une fonction anonyme (Déclaration de fonction) et la seconde est la manière normale de créer une fonction en JavaScript (Déclaration de fonction anonyme), les deux ont une utilisation, des inconvénients et des avantages :

1. Expression de fonction

var functionOne = function() {
    // Some code
};

Une expression de fonction définit une fonction comme faisant partie d'une syntaxe d'expression plus large (généralement une affectation de variable). Les fonctions définies via Functions Les expressions peuvent être nommées ou anonymes. Les expressions de fonction ne doivent pas commencer par «fonction» (d'où les parenthèses autour de l'exemple d'auto-invocation ci-dessous).

Assigner une variable à une fonction, signifie pas de levage, comme nous savons que les fonctions JavaScript peuvent Hoist, cela signifie qu'elles peuvent être appelées avant d'être déclarées, tandis que les variables doivent être déclarées avant d'y accéder, ce qui signifie que dans ce cas, nous ne pouvons pas accéder à la fonction avant l'endroit où elle est déclarée, cela pourrait également être un moyen d'écrire vos fonctions, pour les fonctions qui renvoient une autre fonction, ce type de déclaration pourrait avoir du sens, également dans ECMA6 et ci-dessus, vous pouvez l'assigner à une fonction de flèche qui peut être utilisé pour appeler des fonctions anonymes, également cette façon de déclarer est une meilleure façon de créer des fonctions Constructor en JavaScript.

2. Déclaration de fonction

function functionTwo() {
    // Some code
}

Une déclaration de fonction définit une variable de fonction nommée sans nécessiter d'affectation de variable. Les déclarations de fonctions se produisent en tant que constructions autonomes et ne peuvent pas être imbriquées dans des blocs non fonctionnels. Il est utile de les considérer comme des frères et sœurs de déclarations de variables. Tout comme les déclarations de variables doivent commencer par «var», les déclarations de fonctions doivent commencer par «function».

C'est la façon normale d'appeler une fonction en JavaScript, cette fonction peut être appelée avant même de la déclarer car en JavaScript toutes les fonctions sont hissées, mais si vous avez 'utiliser strict' cela ne sera pas Hoist comme prévu, c'est un bon moyen pour appeler toutes les fonctions normales qui ne sont pas grandes en lignes et ne sont pas non plus une fonction constructeur.

De plus, si vous avez besoin de plus d'informations sur le fonctionnement du levage en JavaScript, visitez le lien ci-dessous:

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Ce ne sont que deux façons possibles de déclarer des fonctions et, dans le second, vous pouvez utiliser la fonction avant la déclaration.

new Function()peut être utilisé pour passer le corps de la fonction dans une chaîne. Et donc cela peut être utilisé pour créer des fonctions dynamiques. Passer également le script sans exécuter le script.

var func = new Function("x", "y", "return x*y;");
function secondFunction(){
   var result;
   result = func(10,20);
   console.log ( result );
}

secondFunction()