dlaczego "to" nie działa w funkcji strzałki ES6?

Question

Oto mój kod:

'use strict'; 

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

ale wyjście jest: hello, undefined.

Oczekuję, że wynik będzie następujący: hello, Hans Gruber.

Myślę, że nie rozumiem this w funkcji strzałki? kto może dać mi wyraźne wyjaśnienie?

Answer 1

Funkcja strzałki zapisuje wiązanie this w zamknięciu utworzonym podczas tworzenia funkcji. Tak więc nie ustawia ona this w kontekście wywołania funkcji.

W twoim przypadku, this musiało window podczas tworzenia obiektu, tak this.username jest window.username nie obj.username.

Z documentation:

Wyrażenie funkcja strzałka (znany również jako funkcja strzałki tłuszczu) ma krótszą składnię porównaniu do wyrażeń funkcyjnych i leksykalnie wiąże wartość

Answer 2

Strzała this Funkcja zachowuje zakres leksykalny, w którym został zdefiniowany. Tak więc this w swojej funkcji hello jest taka sama jak this, gdy funkcja została zdefiniowana, a nie obiekt, na którym jest właściwością. To jest w istocie skrótem

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

co chcesz to coś ES5, niczym

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