Pfeil vs. klassische Methode in der ES6-Klasse

Gibt es einen Grund, die klassische Syntax von ES6-Methoden zu schreiben?

class MyClass {

    myMethod() {
        this.myVariable++;
    }

}

Wenn ich benutze myMethod() Als Rückruf bei einem Ereignis muss ich so etwas schreiben (in JSX):

// Anonymous function.
onClick={() => { this.myMethod(); }}

// Or bind this.
onClick={this.myMethod.bind(this)}

Aber wenn ich Methode als Pfeilfunktion deklariere:

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

als ich nur schreiben kann (in JSX):

onClick={this.myMethod}

Die Funktion, die Sie verwenden, ist nicht Teil von ES6. Es ist das Klassenfelder Vorschlag. Damit können Sie Instanzeigenschaften initialisieren, ohne einen Konstruktor schreiben zu müssen. Dh dein Code:

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

ist genau das gleiche wie

class MyClass {

    constructor() {
        this.myMethod = () => {
            this.myVariable++;
        };
    }

}

Und das zeigt Ihnen auch, was der Unterschied zwischen a ist normal Klassenmethode und eine Methode, die über ein Klassenfeld erstellt wurde:

• Eine normale Methode wird von allen Instanzen der Klasse gemeinsam genutzt (sie ist im Prototyp definiert).
• Pro Instanz wird eine „Klassenfeldmethode“ angelegt

Also alles die gleichen Gründe wie in Verwendung von ‘Prototyp’ vs. ‘dies’ in JavaScript? gelten, aber kurz gesagt:

• Verwenden Sie “Klassenfeldmethoden”, wenn Sie eine Methode pro Instanz benötigen. Dies ist der Fall bei Ereignishandlern, die auf die aktuelle Instanz zugreifen müssen. Zugriff auf this funktioniert auch nur, wenn Sie eine Pfeilfunktion verwenden.
• Verwenden Sie in allen anderen Fällen normale Klassenmethoden.