Comment écrire une fonction de flèche nommée dans ES2015?

J'ai une fonction que j'essaye de convertir à la nouvelle syntaxe de flèche dans ES6 . C'est une fonction nommée:

function sayHello(name) {
    console.log(name + ' says hello');
}

Existe-t-il un moyen de lui donner un nom sans instruction var:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

Évidemment, je ne peux utiliser cette fonction qu'après l'avoir définie. Quelque chose comme suivant:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

Existe-t-il une nouvelle façon de procéder dans ES6 ?

Comment écrire une fonction de flèche nommée dans ES2015?

Vous le faites comme vous l'avez exclu dans votre question: vous le placez à droite d'une affectation ou d'un initialiseur de propriété où le nom de variable ou de propriété peut raisonnablement être utilisé comme nom par le moteur JavaScript. Il n'y a pas d' autre moyen de le faire, mais cela est correct et entièrement couvert par la spécification.

Par spécification, cette fonction a un vrai nom sayHello:

var sayHello = name => {
    console.log(name + ' says hello');
};

Ceci est défini dans Assignment Operators> Runtime Semantics: Evaluation où il appelle l' SetFunctionNameopération abstraite (cet appel est actuellement à l'étape 1.e.iii).

De même, Runtime Semantics: PropertyDefinitionEvaluation appelle SetFunctionNameet donne donc à cette fonction un vrai nom:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

Les moteurs modernes définissent déjà le nom interne de la fonction pour des instructions comme celle-ci; Edge a toujours le bit le rendant disponible comme namesur l'instance de fonction derrière un indicateur d'exécution.

Par exemple, dans Chrome ou Firefox, ouvrez la console Web, puis exécutez cet extrait:

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

Sur Chrome 51 et supérieur et Firefox 53 et supérieur (et Edge 13 et supérieur avec un indicateur expérimental), lorsque vous exécutez cela, vous verrez:

foo.name est: foo
Erreur
    sur foo (http://stacksnippets.net/js:14:23)
    à http://stacksnippets.net/js:17:3

Notez le foo.name is: fooet Error...at foo.

Sur Chrome 50 et versions antérieures, Firefox 52 et versions antérieures, et Edge sans l'indicateur expérimental, vous verrez cela à la place, car ils n'ont pas Function#name(encore) la propriété:

foo.name est: 
Erreur
    sur foo (http://stacksnippets.net/js:14:23)
    à http://stacksnippets.net/js:17:3

Notez que le nom est absent de foo.name is:, mais il est affiché dans la trace de la pile. C'est juste que l'implémentation de la name propriété sur la fonction était une priorité inférieure à certaines autres fonctionnalités ES2015; Chrome et Firefox l'ont maintenant; Edge l'a derrière un drapeau, sans doute ne sera-t-il pas longtemps derrière le drapeau.

Évidemment, je ne peux utiliser cette fonction qu'après l'avoir définie

Correct. Il n'y a pas de syntaxe de déclaration de fonction pour les fonctions fléchées, uniquement la syntaxe d' expression de fonction , et il n'y a pas de flèche équivalente au nom dans une expression de fonction nommée à l'ancienne ( var f = function foo() { };). Il n'y a donc pas d'équivalent à:

console.log(function fact(n) {
    if (n < 0) {
        throw new Error("Not defined for negative numbers");
    }
    return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120

Vous devez le diviser en deux expressions (je dirais que vous devriez le faire de toute façon ) :

let fact = n => {
    if (n < 0) {
      throw new Error("Not defined for negative numbers.");
    }
    return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));

Bien sûr, si vous devez mettre ceci là où une seule expression est requise, vous pouvez toujours ... utiliser une fonction flèche:

console.log((() => {
    let fact = n => {
        if (n < 0) {
            throw new Error("Not defined for negative numbers.");
        }
        return n == 0 ? 1 : n * fact(n - 1);
    };
    return fact(5);
})()); // 120

Je ne dis pas que c'est joli, mais cela fonctionne si vous avez absolument besoin d'un wrapper d'expression unique.

Non. La syntaxe des flèches est un raccourci pour les fonctions anonymes. Les fonctions anonymes sont, eh bien, anonymes.

Les fonctions nommées sont définies avec le functionmot - clé.

Si par «nommé», vous voulez dire que vous voulez .name propriété de votre fonction flèche soit définie, vous avez de la chance.

Si une fonction de flèche est définie à droite d'une expression d'affectation, le moteur prendra le nom à gauche et l'utilisera pour définir les fonctions de flèche .name, par exemple

var sayHello = (name) => {
    console.log(name + ' says hello');
}

sayHello.name //=== 'sayHello'

Cela dit, votre question semble être plus «puis-je obtenir une fonction de flèche à hisser?». La réponse à cette question est un grand «non», je le crains.

Il semble que cela sera possible avec ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

L'exemple donné est:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

Le corps des fonctions fléchées ES6 partage le même lexical que le code qui les entoure, ce qui nous donne le résultat souhaité en raison de la portée des initialiseurs de propriété ES7.

Notez que pour que cela fonctionne avec babel, j'avais besoin d'activer la syntaxe ES7 stade 0 la plus expérimentale. Dans mon fichier webpack.config.js, j'ai mis à jour le chargeur babel comme suit:

{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},

En fait, cela ressemble à une façon de nommer les fonctions fléchées (au moins à partir de Chrome 77 ...) est de faire ceci:

"use strict";
let fn_names = {};
fn_names.foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

afin d'écrire une fonction de flèche nommée, vous pouvez suivre l'exemple ci-dessous, où j'ai une classe nommée LoginClass et à l'intérieur de cette classe, j'ai écrit une fonction de flèche nommée , nommée successAuth classe LoginClass {

    constructor() {

    }

    successAuth = (dataArgs)=> { //named arow function

    }

}

CECI EST ES6

Oui, je pense que ce que vous recherchez est quelque chose comme ceci:

const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"

Vous pouvez ignorer la partie fonction et la partie flèche pour créer des fonctions. Exemple:

 class YourClassNameHere{

   constructor(age) {
     this.age = age;
   }

   foo() {
     return "This is a function with name Foo";
   }

   bar() {
     return "This is a function with name bar";
   }

 }

let myVar = new YourClassNameHere(50);
myVar.foo();