Wie unterscheidet sich das Schlüsselwort „this' zwischen Pfeilfunktionen und regulären Funktionen in JavaScript?

Pfeilfunktionen und kontextloses „This“

In ES6 stellen Pfeilfunktionen eine prägnante Syntax für die Funktionsdeklaration bereit. Ein wesentlicher Unterschied zwischen Pfeilfunktionen und herkömmlichen Funktionen besteht jedoch in der Handhabung des Schlüsselworts „this“.

Wenn Sie eine Pfeilfunktion innerhalb eines Objekts verwenden, wie im angegebenen Code gezeigt:

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

Das Schlüsselwort „this“ innerhalb der Pfeilfunktion bezieht sich nicht auf das Objekt „Person“. Stattdessen zeigt es auf den Bereich, in dem die Pfeilfunktion erstellt wurde, in diesem Fall den globalen Bereich. Daher wird beim Aufruf von „person.shout()“ „mein Name ist“ ohne die Eigenschaft „jason“ protokolliert.

Um dieses Problem zu beheben, können Sie anstelle einer Pfeilfunktion die reguläre Funktionssyntax verwenden:

var person = {
  name: "jason",

  shout: function() {
    console.log("my name is ", this.name)
  }
}

In regulären Funktionen bezieht sich „this“ auf das Objekt, dem die Funktion gehört. Daher wird beim Aufruf korrekt „Mein Name ist Jason“ ausgegeben.

Alternativ können Sie die ES6-Methodendeklarationssyntax nutzen, die der Pfeilfunktionssyntax ähnelt:

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name)
  }
}

Mit dieser Syntax werden in der Funktionsdeklaration der Doppelpunkt (:) und das Schlüsselwort „function“ weggelassen. Allerdings wird weiterhin die reguläre Funktionsdeklarationssyntax verwendet, um sicherzustellen, dass „this“ an das Objekt gebunden ist.

Das obige ist der detaillierte Inhalt vonWie unterscheidet sich das Schlüsselwort „this' zwischen Pfeilfunktionen und regulären Funktionen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!