为何JavaScript对象箭头函数简写方法中this关键字无法正确指向对象？

这是个非常典型的箭头函数认知误区，我来给你讲明白其中的关键～

首先得记住箭头函数的核心特性：箭头函数没有属于自己的this绑定，它的this是从定义它的外层作用域继承来的，而且一旦确定就不会改变——不管你用什么方式调用这个箭头函数，它的this都不会变。

回到你的代码来看：

let person = {
  name: 'Krishna',
  age: 35,
  sayHello() {
    return 'Hello, my name is ' + this.name;
  },
  sayHi: () => `Hi ${this.name}`
};

你可能以为对象字面量会形成一个独立的作用域，但实际上，对象的大括号{}并不会创建新的作用域。所以定义sayHi箭头函数的时候，它的外层作用域是全局作用域（在浏览器环境下就是window对象），因此这个箭头函数的this直接绑定了全局的window。

而普通函数sayHello的规则完全不同：普通函数的this是在调用时确定的——当你用person.sayHello()调用它时，this会自动绑定到调用它的对象person，所以this.name能正确取到'Krishna'。

当你调用person.sayHi()时，虽然是通过person对象调用，但箭头函数的this早已在定义时绑定为全局window，而全局window中没有name属性（除非你手动定义过），所以最终会输出Hi undefined。

如果想让方法的this指向person对象，最直接的方案就是用普通函数写法替代箭头函数：

let person = {
  name: 'Krishna',
  age: 35,
  sayHello() {
    return 'Hello, my name is ' + this.name;
  },
  sayHi() {
    return `Hi ${this.name}`;
  }
};

这样调用person.sayHi()时，this就会正确绑定到person对象，输出Hi Krishna。

内容的提问来源于stack exchange，提问作者kadina