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 ?
Antworten:
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
:Dies wird unter Zuweisungsoperatoren> Laufzeitsemantik: Auswertung definiert, wo die abstrakte
SetFunctionName
Operation aufgerufen wird (dieser Aufruf befindet sich derzeit in Schritt 1.e.iii).In ähnlicher Weise ruft Runtime Semantics: PropertyDefinitionEvaluation auf
SetFunctionName
und gibt dieser Funktion somit einen wahren Namen:Moderne Engines setzen den internen Namen der Funktion bereits für solche Anweisungen; Edge hat immer noch das Bit, das es wie
name
auf der Funktionsinstanz hinter einem Laufzeitflag verfügbar macht .Öffnen Sie beispielsweise in Chrome oder Firefox die Webkonsole und führen Sie dieses Snippet aus:
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:
Beachten Sie das
foo.name is: foo
undError...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 :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 dername
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.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:Sie müssen es in zwei Ausdrücke aufteilen (ich würde argumentieren, dass Sie das trotzdem tun sollten ) :
Wenn Sie dies dort platzieren müssen , wo ein einzelner Ausdruck erforderlich ist, können Sie natürlich immer ... eine Pfeilfunktion verwenden:
Ich sage nicht, dass das hübsch ist, aber es funktioniert, wenn Sie unbedingt einen Wrapper mit einem einzelnen Ausdruck benötigen.
quelle
let f = () => { /* do something */ };
der Funktion beispielsweise einen Namen zuweisen, istlet g = (() => () => { /* do something */ })();
dies nicht der Fall.o.foo = () => {};
der Funktion keinen Namen. Dies war beabsichtigt , um Informationslecks zu verhindern.Nein. Die Pfeilsyntax ist eine Kurzform für anonyme Funktionen. Anonyme Funktionen sind anonym.
Benannte Funktionen werden mit dem
function
Schlüsselwort definiert .quelle
SetFunctionName
Operation .let a = () => {};
definiert eine benannte Funktion (der Name ista
) sowohl gemäß der Spezifikation als auch in modernen Motoren (werfen Sie einen Fehler hinein, um zu sehen); Sie unterstützen dasname
Anwesen nur noch nicht (aber es ist in der Spezifikation und sie werden es irgendwann erreichen).Wenn mit "benannt" gemeint ist, dass die
.name
Eigenschaft 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
, zIhre 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".
quelle
name
Eigenschaft noch nicht überall dort implementiert haben, wo es die ES2015-Spezifikation erfordert. sie werden es schaffen. Es ist eines der letzten Dinge auf der Konformitätsliste für Chrome, und selbst Chrome 50 hat es nicht (Chrome 51 wird es endlich tun). Details . Das OP schloss dies jedoch ausdrücklich aus (bizarr).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:
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:
quelle
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
constructor() { this.handleOptionsButtonClick = (e) => {…}; }
was dem Code in Ihrer Antwort völlig entspricht, aber bereits in ES6 funktioniert. Keine Notwendigkeit zu verwenden.bind
.this
let a = () => {};
definiert eine benannte Pfeilfunktion namensa
. Details .Eigentlich sieht es so aus, als ob eine Möglichkeit, Pfeilfunktionen zu benennen (zumindest ab Chrom 77 ...), darin besteht, Folgendes zu tun:
quelle
fn('yourName', ()=>{})
, das eine 100% korrekte Pfeilfunktionssemantik beibehalten könnte, oder besser noch ein Babel-Plugin für die "benannte Pfeilfunktionssyntax" :fn yourName() => {}
. Beides würde bis zum obigen Code kompiliert. Ich denke, benannte Pfeile wären so BADA55Um 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.quelle
DAS IST ES6
Ja, ich denke, was Sie suchen, ist ungefähr so:
quelle
Sie können den Funktionsteil und den Pfeilteil überspringen, um Funktionen zu erstellen. Beispiel:
quelle