tại sao `this` không hoạt động trong chức năng mũi tên của ES6?

Question

Đây là mã của tôi:

'use strict'; 

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

Nhưng đầu ra là: hello, undefined.

Tôi mong đợi đầu ra là: hello, Hans Gruber.

Tôi nghĩ rằng tôi không hiểu được chức năng của hàm this? ai có thể cho tôi một lời giải thích rõ ràng?

Answer 1

Chức năng mũi tên lưu liên kết của this trong phần đóng được tạo khi hàm được tạo. Vì vậy, nó không đặt this đến ngữ cảnh của cuộc gọi đến hàm.

Trong trường hợp của bạn, this được ràng buộc để window khi bạn tạo đối tượng, vì vậy this.username là window.username, không obj.username.

Từ documentation:

Một biểu hiện mũi tên chức năng (còn gọi là mũi tên chức năng chất béo) có một cú pháp ngắn hơn so với biểu hiện chức năng và lexically liên kết với giá trị this

Answer 2

Một mũi tên chức năng bảo tồn phạm vi từ vựng trong đó nó được xác định. Vì vậy, this trong chức năng hello của bạn giống như this khi hàm được xác định, không phải đối tượng trên đó là thuộc tính. Nó thực chất là viết tắt cho

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

gì bạn muốn là một cái gì đó ES5 của như

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