JavaScript Fonctions nommées


Exemple

Les fonctions peuvent être nommées ou non nommées ( fonctions anonymes ):

var namedSum = function sum (a, b) { // named
    return a + b;
}

var anonSum = function (a, b) { // anonymous
    return a + b;
}

namedSum(1, 3);
anonSum(1, 3);

4
4

Mais leurs noms sont privés à leur propre portée:

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

sum(1, 3);

Uncaught ReferenceError: la somme n'est pas définie

Les fonctions nommées diffèrent des fonctions anonymes dans plusieurs scénarios:

  • Lorsque vous déboguez, le nom de la fonction apparaîtra dans la trace d'erreur / pile
  • Les fonctions nommées sont hissées alors que les fonctions anonymes ne sont pas
  • Les fonctions nommées et les fonctions anonymes se comportent différemment lors de la gestion de la récursivité
  • Selon la version ECMAScript, les fonctions nommées et anonymes peuvent traiter différemment la propriété du name fonction

Les fonctions nommées sont hissées

Lors de l'utilisation d'une fonction anonyme, la fonction ne peut être appelée qu'après la ligne de déclaration, alors qu'une fonction nommée peut être appelée avant la déclaration. Considérer

foo();
var foo = function () { // using an anonymous function
    console.log('bar');
}

UnCaught TypeError: foo n'est pas une fonction

foo();
function foo () { // using a named function
    console.log('bar');
}

bar


Fonctions nommées dans un scénario récursif

Une fonction récursive peut être définie comme:

var say = function (times) {
    if (times > 0) {
        console.log('Hello!');

        say(times - 1);
    }
}

//you could call 'say' directly, 
//but this way just illustrates the example
var sayHelloTimes = say;

sayHelloTimes(2);

salut!
salut!

Que se passe-t-il si quelque part dans votre code la liaison de la fonction d'origine est redéfinie?

var say = function (times) {
    if (times > 0) {
        console.log('Hello!');

        say(times - 1);
    }
}

var sayHelloTimes = say;
say = "oops";

sayHelloTimes(2);

salut!
UnCaught TypeError: say n'est pas une fonction

Cela peut être résolu en utilisant une fonction nommée

// The outer variable can even have the same name as the function
// as they are contained in different scopes
var say = function say (times) {
    if (times > 0) {
        console.log('Hello!');

        // this time, 'say' doesn't use the outer variable
        // it uses the named function
        say(times - 1);
    }
}

var sayHelloTimes = say;
say = "oops";

sayHelloTimes(2);

salut!
salut!

Et en prime, la fonction nommée ne peut pas être définie sur undefined , même depuis l'intérieur:

var say = function say (times) {
    // this does nothing
    say = undefined;
    
    if (times > 0) {
        console.log('Hello!');

        // this time, 'say' doesn't use the outer variable
        // it's using the named function
        say(times - 1);
    }
}

var sayHelloTimes = say;
say = "oops";

sayHelloTimes(2);

salut!
salut!


La propriété name des fonctions

Avant ES6, les fonctions nommées avaient leurs name propriétés définies à leurs noms de fonctions, et les fonctions anonymes avaient leur name propriétés sont définies sur la chaîne vide.

5
var foo = function () {}
console.log(foo.name); // outputs ''

function foo () {}
console.log(foo.name); // outputs 'foo'

Post ES6, les fonctions nommées et non nommées définissent toutes les deux leurs propriétés de name :

6
var foo = function () {}
console.log(foo.name); // outputs 'foo'

function foo () {}
console.log(foo.name); // outputs 'foo'

var foo = function bar () {}
console.log(foo.name); // outputs 'bar'