Pfeilfunktionen und das [duplicate]

Ich probiere ES6 aus und möchte eine Eigenschaft so in meine Funktion aufnehmen

var person = {
  name: "jason",

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

person.shout() // Should print out my name is jason

Wenn ich jedoch diese Codekonsole ausführe, werden nur Protokolle erstellt my name is. Was mache ich falsch?

Kurze Antwort: this zeigt auf die nächste Grenze this – im bereitgestellten Code this befindet sich im umschließenden Geltungsbereich.

Längere Antwort: Pfeilfunktionen
habe nicht this, arguments oder andere spezielle Namen gebunden überhaupt – beim Erstellen des Objekts der Name this findet sich im umschließenden Geltungsbereich, nicht der person Objekt. Sie können dies deutlicher sehen, indem Sie die Deklaration verschieben:

var person = {
  name: "Jason"
};
person.shout = () => console.log("Hi, my name is", this);

Und noch deutlicher, wenn es in eine vage Annäherung an die Pfeilsyntax in ES5 übersetzt wird:

var person = {
  name: "Jason"
};
var shout = function() {
  console.log("Hi, my name is", this.name);
}.bind(this);
person.shout = shout;

In beiden Fällen, this (für die Shout-Funktion) weist auf denselben Geltungsbereich hin wie person definiert ist, nicht der neue Bereich, dem die Funktion zugeordnet ist, wenn sie hinzugefügt wird person Objekt.

Sie kann nicht Pfeilfunktionen so funktionieren lassen, aber, wie @kamituel in seiner Antwort betont, Sie kann Nutzen Sie das kürzere Methodendeklarationsmuster in ES6, um ähnliche Platzeinsparungen zu erzielen:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leave off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

Stimmte mit @Sean Vieira überein – in diesem Fall this ist an das globale Objekt gebunden (oder, wie im Kommentar erwähnt, allgemeiner an einen umschließenden Gültigkeitsbereich).

Wenn Sie eine kürzere Syntax wünschen, gibt es eine weitere Option: Erweiterte Objektliterale unterstützen eine kurze Syntax für Eigenschaftsfunktionen. this wird gebunden, wie Sie es dort erwarten. Sehen shout3():

window.name = "global";

var person = {
    name: "jason",

    shout: function () {
        console.log("my name is ", this.name);
    },
    shout2: () => {
        console.log("my name is ", this.name);
    },
    // Shorter syntax
    shout3() {
        console.log("my name is ", this.name);
    }
};

person.shout();  // "jason"
person.shout2(); // "global"
person.shout3(); // "jason"

Die akzeptierte Antwort ist ausgezeichnet, prägnant und klar, aber ich werde ein wenig auf das eingehen, was Sean Vieira gesagt hat:

Pfeilfunktionen haben diese Argumente oder andere spezielle Namen überhaupt nicht gebunden.

Da die Pfeilfunktion kein „this“ hat, verwendet sie das übergeordnete „this“. “this” zeigt immer auf das Elternobjekt, und das Elternobjekt des Personenobjekts ist Window (wenn Sie sich in einem Browser befinden).

Um es zu beweisen, führen Sie dies in Ihrer Konsole aus:

var person = {
    name: "Jason",
    anotherKey: this
}
console.log(person.anotherKey)

Sie erhalten das Window-Objekt.

Ich finde, das ist eine wirklich hilfreiche Art, darüber nachzudenken. Es ist nicht ganz die ganze Geschichte, denn was das „this“ eines Objektliterals ist, ist eine andere Diskussion.

Hier wird der Wert dieser innerhalb der Funktion dadurch bestimmt, wo die Pfeilfunktion definiert ist, nicht wo sie verwendet wird.

Damit this bezieht sich auf ein globales/Fensterobjekt, wenn es nicht in einen anderen Namensraum eingeschlossen ist

Das Problem ist, dass (MDN)

Ein Pfeilfunktionsausdruck […] bindet lexikalisch den this-Wert.

Pfeilfunktionen erfassen den this-Wert des einschließenden Kontexts.

Daher ist der Wert von this in dieser Funktion wird der Wert von sein this wo Sie das Objektliteral erstellen. Wahrscheinlich wird das sein window im nicht strikten Modus und undefined im strengen Modus.

Um es zu beheben, sollten Sie eine normale Funktion verwenden:

var person = {
  name: "jason",
  shout: function(){ console.log("my name is ", this.name) }
}
person.shout();