Warum das `This` nicht in der Pfeilfunktion von ES6 funktioniert?

Question

Hier ist mein Code:

'use strict'; 

let obj = { 
    username : 'Hans Gruber', 
    hello:() => 'hello, ' + this.username 
}; 
console.log(obj.hello()); 

Aber der Ausgang ist: hello, undefined.

Ich erwarte die Ausgabe ist: hello, Hans Gruber.

Ich glaube, ich habe this in Pfeilfunktion nicht verstanden? Wer kann mir eine klare Erklärung geben?

Answer 1

Eine Pfeilfunktion speichert die Bindung this in der Schließung, die beim Erstellen der Funktion erstellt wird. Daher wird this nicht in den Kontext des Aufrufs der Funktion gesetzt.

In Ihrem Fall wurde this zu window gebunden, wenn Sie das Objekt erstellt, so this.username ist window.username, nicht obj.username.

Vom documentation:

Ein Pfeil Funktion Ausdruck (auch als Fett Pfeil Funktion bekannt) hat eine kürzere Syntax im Vergleich zu Funktionsausdrücken und bindet lexikalisch den this Wert

Answer 2

Ein Pfeil Funktion behält den lexikalischen Geltungsbereich bei, in dem sie definiert wurde. So this in Ihrer hello Funktion ist das gleiche wie this, wenn die Funktion definiert wurde, nicht das Objekt, auf dem es eine Eigenschaft ist. Es ist im Wesentlichen für

function() { 
    return 'hello, ' + this.username; 
}.bind(this); 

des ES5 Kurzschrift Was Sie wollen, ist so etwas wie

let obj = { 
    username: 'Hans Gruber', 
    hello() {return `hello, ${this.username}`;} 
};