Wie können Pfeilfunktionen Klassenmethoden in ES6 vereinfachen?

Pfeilfunktionen als Klassenmethoden in ES6-Klassen

In ES6-Klassen können Sie Klassenmethoden mithilfe von Pfeilfunktionen definieren. Dieser Ansatz hat mehrere Vorteile, darunter:

• Pfeilfunktionen sind standardmäßig an die Klasseninstanz gebunden, sodass keine explizite Bindung erforderlich ist.
• Sie bieten eine prägnante und lesbare Syntax.

Syntax

So geben Sie einfach eine Klassenmethode mithilfe einer Pfeilfunktion an Weisen Sie die Pfeilfunktion einer Eigenschaft des Klassenobjekts zu. Im Gegensatz zu regulären Eigenschaften benötigen Pfeilfunktionen jedoch nicht das Schlüsselwort this vor dem Pfeil.

Zum Beispiel:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Scoping

Pfeilfunktionen sind an den lexikalischen Gültigkeitsbereich gebunden, was bedeutet, dass sie den Gültigkeitsbereich des Klassenobjekts erben. Daher wird beim Aufrufen der handleInputChange-Methode dieser Kontext automatisch auf die Klasseninstanz festgelegt, um den ordnungsgemäßen Gültigkeitsbereich sicherzustellen.

Verwendung

Sie können Klassenmethoden mit Pfeilfunktionen übergeben als Rückruffunktionen, ohne sich Gedanken über die Bindung machen zu müssen. Beispielsweise können Sie SomeClass.handleInputChange setTimeout zuweisen, um einen Funktionsaufruf innerhalb des Bereichs der Klasseninstanz zu planen.

Konfiguration

Beachten Sie, dass die Verwendung von Pfeilfunktionen als Klasse Methoden sind eine experimentelle Funktion in JavaScript. Um diese Funktion zu aktivieren, müssen Sie in Ihrer Babel-Konfiguration die Option „experimentell“ auf „true“ setzen. Sie können dies erreichen, indem Sie das Babel-Plugin „transform-class-properties“ installieren.

Die Syntax für die Babel-Plugin-Konfiguration lautet wie folgt:

{
  "plugins": [
    "transform-class-properties"
  ]
}

Durch die Nutzung von Pfeilfunktionen als Klassenmethoden können Sie kann Ihren Code optimieren und die Lesbarkeit verbessern und gleichzeitig den richtigen Bereich für Rückruffunktionen sicherstellen.

Das obige ist der detaillierte Inhalt vonWie können Pfeilfunktionen Klassenmethoden in ES6 vereinfachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!