为什么`this`不能在ES6箭头功能中工作？

Question

这是我的代码：

'use strict';

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

但输出是：hello, undefined。

我希望输出为：hello, Hans Gruber。

我想我还没有在箭头函数中理解this。谁可以给我一个明确的解释？

Answer 1

箭头函数保存this在创建函数时创建的闭包中的绑定。因此它不会将this设置为函数调用的上下文。

在您的情况下，this在您创建对象时绑定到window，因此this.username为window.username，而不是obj.username。

来自documentation：

  

箭头函数表达式（也称为胖箭头函数）与函数表达式相比具有更短的语法，词法绑定this值

Answer 2

箭头函数保留了定义它的词法范围。因此，this函数中的hello与定义函数时的this相同，而不是作为属性的对象。它基本上是ES5的简写

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

你想要的是

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