Wie schreibe ich eine benannte Pfeilfunktion in ES2015?

Ich habe eine Funktion, die ich in ES6 in die neue Pfeilsyntax konvertieren möchte . Es ist eine benannte Funktion:

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

Gibt es eine Möglichkeit, ihm einen Namen ohne var-Anweisung zu geben:

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

Natürlich kann ich diese Funktion erst verwenden, nachdem ich sie definiert habe. So etwas wie folgendes:

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

Gibt es eine neue Möglichkeit, dies in ES6 zu tun ?

Wie schreibe ich eine benannte Pfeilfunktion in ES2015?

Sie tun dies so, wie Sie es in Ihrer Frage ausgeschlossen haben: Sie platzieren es auf der rechten Seite einer Zuweisung oder eines Eigenschaftsinitialisierers, wobei die Variable oder der Eigenschaftsname von der JavaScript-Engine vernünftigerweise als Name verwendet werden kann. Es gibt keine andere Möglichkeit, dies zu tun, aber dies ist korrekt und wird vollständig von der Spezifikation abgedeckt.

Pro Spezifikation hat diese Funktion einen wahren Namen sayHello:

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

Dies wird unter Zuweisungsoperatoren> Laufzeitsemantik: Auswertung definiert, wo die abstrakte SetFunctionNameOperation aufgerufen wird (dieser Aufruf befindet sich derzeit in Schritt 1.e.iii).

In ähnlicher Weise ruft Runtime Semantics: PropertyDefinitionEvaluation aufSetFunctionName und gibt dieser Funktion somit einen wahren Namen:

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

Moderne Engines setzen den internen Namen der Funktion bereits für solche Anweisungen; Edge hat immer noch das Bit, das es wie nameauf der Funktionsinstanz hinter einem Laufzeitflag verfügbar macht .

Öffnen Sie beispielsweise in Chrome oder Firefox die Webkonsole und führen Sie dieses Snippet aus:

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

Auf Chrome 51 und höher und Firefox 53 und höher (und Edge 13 und höher mit einem experimentellen Flag) sehen Sie, wenn Sie dies ausführen:

foo.name ist: foo
Error
    bei foo (http://stacksnippets.net/js:14:23)
    unter http://stacksnippets.net/js:17:3

Beachten Sie das foo.name is: foound Error...at foo.

In Chrome 50 und früheren Versionen, Firefox 52 und früheren Versionen und Edge ohne das experimentelle Flag wird dies stattdessen angezeigt, da sie Function#name(noch) nicht über die Eigenschaft verfügen :

foo.name ist: 
Error
    bei foo (http://stacksnippets.net/js:14:23)
    unter http://stacksnippets.net/js:17:3

Beachten Sie, dass der Name von fehlt foo.name is:, aber es ist in dem Stack - Trace angezeigt. Es ist nur so, dass die tatsächliche Implementierung der name Eigenschaft für die Funktion eine niedrigere Priorität hatte als einige andere ES2015-Funktionen. Chrome und Firefox haben es jetzt; Edge hat es hinter einer Flagge, vermutlich wird es nicht mehr lange hinter der Flagge sein.

Natürlich kann ich diese Funktion erst verwenden, nachdem ich sie definiert habe

Richtig. Es gibt keine Funktion Deklaration Syntax für Pfeil Funktionen, nur die Funktion Ausdruck Syntax, und es gibt keine Entsprechung in einem alten Stil benannte Funktion Ausdruck (auf den Namen Pfeil var f = function foo() { };). Es gibt also kein Äquivalent zu:

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

Sie müssen es in zwei Ausdrücke aufteilen (ich würde argumentieren, dass Sie das trotzdem tun sollten ) :

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));

Wenn Sie dies dort platzieren müssen , wo ein einzelner Ausdruck erforderlich ist, können Sie natürlich immer ... eine Pfeilfunktion verwenden:

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

Ich sage nicht, dass das hübsch ist, aber es funktioniert, wenn Sie unbedingt einen Wrapper mit einem einzelnen Ausdruck benötigen.

Nein. Die Pfeilsyntax ist eine Kurzform für anonyme Funktionen. Anonyme Funktionen sind anonym.

Benannte Funktionen werden mit dem functionSchlüsselwort definiert .

Wenn mit "benannt" gemeint ist, dass die .nameEigenschaft Ihrer Pfeilfunktion festgelegt werden soll, haben Sie Glück.

Wenn eine Pfeilfunktion auf der rechten Seite eines Zuweisungsausdrucks definiert ist, nimmt die Engine den Namen auf der linken Seite und verwendet ihn, um die Pfeilfunktionen festzulegen .name, z

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

sayHello.name //=== 'sayHello'

Ihre Frage scheint jedoch eher zu lauten: "Kann ich eine Pfeilfunktion zum Heben bringen?". Die Antwort auf diese Frage ist leider ein großes altes "Nein".

Es scheint, dass dies mit ES7 möglich sein wird: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions

Das gegebene Beispiel ist:

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

Der Hauptteil der ES6-Pfeilfunktionen hat dieselbe lexikalische Form wie der sie umgebende Code, wodurch wir aufgrund der Art und Weise, in der die Initialisierer der ES7-Eigenschaften festgelegt sind, das gewünschte Ergebnis erzielen.

Beachten Sie, dass ich die experimentellste ES7-Syntax der Stufe 0 aktivieren musste, damit dies mit babel funktioniert. In meiner Datei webpack.config.js habe ich den Babel Loader folgendermaßen aktualisiert:

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

Eigentlich sieht es so aus, als ob eine Möglichkeit, Pfeilfunktionen zu benennen (zumindest ab Chrom 77 ...), darin besteht, Folgendes zu tun:

"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);
}

Um eine benannte Pfeilfunktion zu schreiben, können Sie das folgende Beispiel verwenden, in dem ich eine Klasse mit dem Namen LoginClass habe. Innerhalb dieser Klasse habe ich einen Pfeil mit dem Namen function namens successAuth loginClass {geschrieben.

    constructor() {

    }

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

    }

}

DAS IST ES6

Ja, ich denke, was Sie suchen, ist ungefähr so:

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

Sie können den Funktionsteil und den Pfeilteil überspringen, um Funktionen zu erstellen. Beispiel:

 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();