Wann sollte ich Pfeilfunktionen in ECMAScript 6 verwenden?

Question

Mit () => {} und function () {} erhalten wir zwei sehr ähnliche Möglichkeiten, Funktionen in ES6 zu schreiben. In anderen Sprachen unterscheiden sich Lambda-Funktionen oft dadurch, dass sie anonym sind, aber in ECMAScript kann jede Funktion anonym sein. Jeder der beiden Typen hat einzigartige Anwendungsbereiche (zum Beispiel, wenn this entweder explizit gebunden werden muss oder explizit nicht gebunden werden muss). Zwischen diesen Bereichen gibt es eine große Anzahl von Fällen, in denen beide Notationen funktionieren werden.

Pfeilfunktionen in ES6 haben mindestens zwei Einschränkungen:

• Funktionieren nicht mit new und können nicht verwendet werden, wenn prototype erstellt wird
• Fixiertes this an den Bereich bei der Initialisierung gebunden

Abgesehen von diesen beiden Einschränkungen könnten Pfeilfunktionen theoretisch normale Funktionen fast überall ersetzen. Was ist der richtige Ansatz für ihre praktische Verwendung? Sollten Pfeilfunktionen z.B. verwendet werden:

• "überall dort, wo sie funktionieren", d.h. überall dort, wo eine Funktion nicht agnostisch bezüglich der this-Variable sein muss und wir kein Objekt erstellen
• nur "überall dort, wo sie benötigt werden", z.B. bei Event Listeners, Timeouts, die an einen bestimmten Bereich gebunden werden müssen
• mit 'kurzen' Funktionen, aber nicht mit 'langen' Funktionen
• nur mit Funktionen, die keine weitere Pfeilfunktion enthalten

Ich suche nach einer Leitlinie zur Auswahl der geeigneten Funktionsnotation in der zukünftigen Version von ECMAScript. Die Leitlinie muss klar sein, damit sie Entwicklern in einem Team beigebracht werden kann, und konsistent sein, so dass sie kein ständiges Refactoring von einer Funktionsnotation zur anderen erfordert.

_{Die Frage richtet sich an Personen, die über Codestil im Kontext des kommenden ECMAScript 6 (Harmony) nachgedacht haben und bereits mit der Sprache gearbeitet haben.}

Answer 1

Auf einfache Weise,

var a = 20; function a() {this.a = 10; console.log(a);}
//20, da der Kontext hier window ist.

Ein weiteres Beispiel:

var a = 20;
function ex(){
    this.a = 10;
    function inner(){
        console.log(this.a); // Kannst du die Ausgabe dieser Zeile erraten?
    }
    inner();
}
var test = new ex();

Antwort: Die Konsole würde 20 ausgeben.

Der Grund dafür ist, dass jedes Mal, wenn eine Funktion ausgeführt wird, ein eigener Stapel erstellt wird. In diesem Beispiel wird die Funktion ex mit dem new-Operator ausgeführt, sodass ein Kontext erstellt wird, und wenn inner ausgeführt wird, erstellt JavaScript einen neuen Stapel und führt die Funktion inner in einem globalen Kontext aus, obwohl es einen lokalen Kontext gibt.

Wenn wir also möchten, dass die Funktion inner einen lokalen Kontext hat, der ex ist, müssen wir den Kontext an die innere Funktion binden.

Pfeile lösen dieses Problem. Anstatt den globalen Kontext zu nehmen, nehmen sie den lokalen Kontext an, falls vorhanden. Im gegebenen Beispiel wird es also new ex() als this nehmen.

Also lösen Pfeile in allen Fällen, in denen die Bindung explizit ist, das Problem standardmäßig.