Wann (und warum) sollten Sie ES6-Pfeilfunktionen verwenden - und wann nicht

Programmierung

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 => 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 schreibenreturnauch.

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 returnAnweisung 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:

  1. 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 thisSchlüsselwort je nach Kontext, in dem es aufgerufen wird, an unterschiedliche Werte gebunden . Mit Pfeil Funktionen jedoch thisist lexikalisch gebunden . Dies bedeutet, dass thisder Code verwendet wird, der die Pfeilfunktion enthält.

Schauen Sie sich zum Beispiel die folgende setTimeoutFunktion 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 thisKontext an die Funktion zu übergeben. Andernfalls thiswä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 thisSchlüsselwort gebunden werden. Daher wird ein Bereich lexikalisch aufgerufen und der Wert von thisin 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:

  1. Objektmethoden

Wenn Sie anrufen cat.jumps, verringert sich die Anzahl der Leben nicht. Dies liegt daran, dass thises an nichts gebunden ist und den Wert von thisvon 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 thises 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, thiswas 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 mapund 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.