Wann und warum lohnt es sich, ES6-Pfeilfunktionen zu verwenden, und wann nicht?

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels " Wann (und warum) sollten Sie ES6-Pfeilfunktionen verwenden - und wann nicht " von Cynthia Lee.

Pfeilfunktionen sind die beliebteste ES6-Funktion. Dies ist eine neue, prägnante Art, Funktionen zu schreiben.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Jetzt das gleiche mit der Pfeilfunktion.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

Viel kürzer! Wir können geschweifte Klammern und die return-Anweisung weglassen (wenn es keinen Block gibt, aber dazu später mehr).

Lassen Sie uns herausfinden, wie sich die neue Methode von der üblichen unterscheidet.

Syntax

Das erste, was Sie schnell bemerken werden, sind die verschiedenen Syntaxvarianten. Schauen wir uns die wichtigsten an:

1. Ohne Parameter

Wenn die Funktion keine Parameter hat, können Sie einfach leere Klammern vor => schreiben

 () => 42 

In der Tat können Sie überhaupt auf Klammern verzichten!

 _ => 42 

1. Ein Parameter

Klammern sind ebenfalls optional

 x => 42 || (x) => 42 

3. Mehrere Parameter

Hier brauchen wir Klammern

 (x, y) => 42 

4. Anweisungen

Normalerweise gibt ein Funktionsausdruck einen Wert zurück, während eine Anweisung für die Aktion verantwortlich ist.

Es muss beachtet werden, dass bei Pfeilfunktionen, wenn wir eine Reihe von Aktionen / Anweisungen haben, geschweifte Klammern und die return-Anweisung verwendet werden müssen.
Hier ist eine Beispielpfeilfunktion, die mit der if-Anweisung verwendet wird:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. Der Körper des Pilzblocks

Selbst wenn Ihre Funktion einfach Werte zurückgibt, ihr Text jedoch in geschweiften Klammern steht, ist die return-Anweisung erforderlich.

 var addValues = (x, y) => { return x + y } 

6. Objektliteral

Wenn die Funktion ein Objektliteral zurückgibt, muss es in Klammern eingeschlossen werden.

 x =>({ y: x }) 

Pfeilfunktionen - Anonym

Beachten Sie, dass die Pfeilfunktionen anonym sind und keinen Namen haben.

Dies schafft einige Schwierigkeiten:

1. Schwer zu entwerten
   
   In diesem Fall können Sie den Namen der Funktion und die Zeilennummer, in der der Fehler aufgetreten ist, nicht verfolgen.
   
2. Kann keiner Variablen zugewiesen werden
   
   Wenn Sie für etwas einen Link innerhalb der Funktion zu sich selbst benötigen (Rekursion, ein Ereignishandler, der rückgängig gemacht werden muss), funktioniert nichts
   

Hauptvorteil: nein das

In regulären Funktionen gibt dies den Kontext an, in dem diese Funktion aufgerufen wird. Dies ist die gleiche Funktion wie in der Umgebung, in der die Pfeilfunktion deklariert ist.

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 obigen Beispiel müssen Sie .bind (this) verwenden, um den Kontext an die Funktion zu übergeben. Andernfalls ist dies nicht definiert.

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

In diesem Beispiel müssen Sie dies nicht binden. Die Pfeilfunktion übernimmt dies aus dem Verschluss.

Wann werden Pfeilfunktionen verwendet?

Nun, denke ich, wurde klar, dass Pfeilfunktionen keine gewöhnlichen ersetzen.

Hier sind einige Beispiele, wenn Sie sie wahrscheinlich nicht verwenden möchten.

1. Objektmethoden

Wenn Sie cat.jumps aufrufen, verringert sich die Anzahl der Leben nicht. Dies liegt daran, dass dies an nichts gebunden ist und den Wert vom Abschluss erbt.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. Rückruffunktionen mit dynamischem Kontext

Wenn Sie einen dynamischen Kontext benötigen, ist eine Pfeilfunktion eine schlechte Option.

 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 dies nicht an eine Schaltfläche gebunden ist.

3. Wenn sich die Lesbarkeit des Codes verschlechtert

Mit den üblichen Funktionen ist immer klar, was Sie sagen wollten. Bei Pfeilspitzen werden aufgrund der unterschiedlichen Syntaxoptionen einige Dinge weniger offensichtlich.

Wann genau lohnt es sich, Pfeilfunktionen zu verwenden?

Pfeilfunktionen eignen sich hervorragend für Fälle, in denen Sie keinen eigenen Funktionskontext benötigen.

Ich mag es auch sehr, Pfeilfunktionen in allen Arten von map und zu reduce - der Code liest sich so besser.