
Pfeilfunktionen (auch als "Fettpfeilfunktionen" bezeichnet) sind zweifellos eine der beliebtesten Funktionen von ES6. Sie führten eine neue Art des Schreibens prägnanter Funktionen ein.
Hier ist eine in ES5-Syntax geschriebene Funktion:
function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8
Hier ist dieselbe Funktion, die als Pfeilfunktion ausgedrückt wird:
var timesTwo = params => params * 2 timesTwo(4); // 8
Es ist viel kürzer! Wir können die geschweiften Klammern und die return-Anweisung aufgrund impliziter Rückgaben weglassen (aber nur, wenn es keinen Block gibt - mehr dazu weiter unten).
Es ist wichtig zu verstehen, wie sich die Pfeilfunktion anders verhält als die regulären ES5-Funktionen.
Variationen

Eine Sache, die Sie schnell bemerken werden, ist die Vielfalt der Syntaxen, die in Pfeilfunktionen verfügbar sind. Lassen Sie uns einige der häufigsten durchgehen:
1. Keine Parameter
Wenn keine Parameter vorhanden sind, können Sie vor =&
gt; leere Klammern setzen .
() => 42
Tatsächlich brauchen Sie nicht einmal die Klammern!
_ => 42
2. Einzelner Parameter
Bei diesen Funktionen sind Klammern optional:
x => 42 || (x) => 42
3. Mehrere Parameter
Für diese Funktionen sind Klammern erforderlich:
(x, y) => 42
4. Aussagen (im Gegensatz zu Ausdrücken)
In seiner grundlegendsten Form erzeugt ein Funktionsausdruck einen Wert, während eine Funktionsanweisung eine Aktion ausführt.
Bei der Pfeilfunktion ist es wichtig zu beachten, dass Anweisungen geschweifte Klammern haben müssen. Sobald die geschweiften Klammern vorhanden sind, müssen Sie immer schreibenreturn
auch.
Hier ist ein Beispiel für die Pfeilfunktion, die mit einer if-Anweisung verwendet wird:
var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }
5. "Block Körper"
Wenn sich Ihre Funktion in einem Block befindet, müssen Sie auch die explizite return
Anweisung verwenden:
var addValues = (x, y) => { return x + y }
6. Objektliterale
Wenn Sie ein Objektliteral zurückgeben, muss es in Klammern gesetzt werden. Dies zwingt den Interpreter, zu bewerten, was sich in den Klammern befindet, und das Objektliteral wird zurückgegeben.
x =>({ y: x })
Syntaktisch anonym

Es ist wichtig zu beachten, dass Pfeilfunktionen anonym sind, was bedeutet, dass sie nicht benannt sind.
Diese Anonymität schafft einige Probleme:
- Schwieriger zu debuggen
Wenn Sie eine Fehlermeldung erhalten, können Sie den Namen der Funktion oder die genaue Zeilennummer, in der sie aufgetreten ist, nicht nachverfolgen.
2. Keine Selbstreferenzierung
Wenn Ihre Funktion zu irgendeinem Zeitpunkt eine Selbstreferenz haben muss (z. B. Rekursion, Ereignishandler, der die Bindung aufheben muss), funktioniert sie nicht.
Hauptvorteil: Keine Bindung von "dies"

In klassischen Funktionsausdrücken ist das this
Schlüsselwort je nach Kontext, in dem es aufgerufen wird, an unterschiedliche Werte gebunden . Mit Pfeil Funktionen jedoch this
ist lexikalisch gebunden . Dies bedeutet, dass this
der Code verwendet wird, der die Pfeilfunktion enthält.
Schauen Sie sich zum Beispiel die folgende setTimeout
Funktion an:
// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };
Im ES5-Beispiel .bind(this)
ist dies erforderlich, um den this
Kontext an die Funktion zu übergeben. Andernfalls this
wäre standardmäßig undefiniert.
// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };
ES6-Pfeilfunktionen können nicht an ein this
Schlüsselwort gebunden werden. Daher wird ein Bereich lexikalisch aufgerufen und der Wert von this
in dem Bereich verwendet, in dem er definiert wurde.
Wenn Sie keine Pfeilfunktionen verwenden sollten
Nachdem Sie etwas mehr über Pfeilfunktionen gelernt haben, hoffe ich, dass Sie verstehen, dass sie keine regulären Funktionen ersetzen.
Hier sind einige Fälle, in denen Sie sie wahrscheinlich nicht verwenden möchten:
- Objektmethoden
Wenn Sie anrufen cat.jumps
, verringert sich die Anzahl der Leben nicht. Dies liegt daran, dass this
es an nichts gebunden ist und den Wert von this
von seinem übergeordneten Bereich erbt .
var cat = { lives: 9, jumps: () => { this.lives--; } }
2. Rückruffunktionen mit dynamischem Kontext
Wenn Ihr Kontext dynamisch sein soll, sind Pfeilfunktionen nicht die richtige Wahl. Schauen Sie sich diesen Event-Handler unten an:
var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });
Wenn wir auf die Schaltfläche klicken, erhalten wir einen TypeError. Dies liegt daran, dass this
es nicht an die Schaltfläche gebunden ist, sondern an den übergeordneten Bereich.
3. Wenn Ihr Code dadurch weniger lesbar wird
Es lohnt sich, die Vielfalt der Syntax zu berücksichtigen, die wir zuvor behandelt haben. Mit regulären Funktionen wissen die Leute, was sie zu erwarten haben. Mit Pfeilfunktionen kann es schwierig sein, das, was Sie sehen, sofort zu entziffern.
Wann sollten Sie sie verwenden
Pfeilfunktionen glänzen am besten mit allem, this
was an den Kontext gebunden werden muss, und nicht mit der Funktion selbst.
Trotz der Tatsache, dass sie anonym sind, verwende ich sie auch gerne mit Methoden wie map
und reduce
, weil ich denke, dass mein Code dadurch besser lesbar wird. Für mich überwiegen die Vorteile die Nachteile.
Vielen Dank für das Lesen meines Artikels und teilen Sie, wenn es Ihnen gefallen hat! Lesen Sie meine anderen Artikel wie Wie ich meine Pomodoro Clock-App erstellt habe und welche Lektionen ich dabei gelernt habe, und entmystifizieren Sie das 'neue' Schlüsselwort von JavaScript.