箭头函数中this在对象与类中的行为差异原因咨询

我正在分析类与对象中this的行为，有一个困惑已久的问题。相关代码片段如下：

const obj = {
  a: 5,
  say: () => console.log(this.a)
}

obj.say(); // will log undefined

class A {
  constructor() {
    this.a = 15;
  }

  say = () => console.log(this.a);
}

const a = new A();
a.say(); // will log 15

为何类中的示例可正常运行，而单个对象中的却不行？我了解对象与类的方法声明存在差异，但具体差异是什么？

核心原因：箭头函数的this是词法绑定的 #

箭头函数没有自己的this，它的this完全由定义时所在的词法作用域决定，不会被调用方式改变。这是理解两个场景差异的关键。

1. 普通对象字面量中的箭头函数 #

当你定义obj这个对象字面量时，箭头函数say是在**全局作用域（或模块作用域）**下创建的。此时这个作用域的this在浏览器中是window，在Node.js中是global，严格模式下则是undefined。

所以调用obj.say()时，箭头函数依然沿用定义时的this，和obj本身没有绑定关系，自然拿不到obj.a，输出undefined。

2. 类中的箭头函数类字段 #

类里的say = () => ...属于类字段语法，它的初始化时机是在类的构造函数执行阶段。当你new A()时，构造函数会创建一个实例对象，此时构造函数里的this指向这个新实例，箭头函数在这个时机被定义，就捕获了构造函数中的this（也就是实例对象）。

所以后续调用a.say()时，箭头函数的this始终指向实例a，能正常输出15。

对象与类方法声明的具体差异 #

• 普通对象的箭头函数：和对象本身独立，this绑定到外层作用域，和调用时的对象无关。如果要让this指向对象，应该用普通函数：

  const obj = {
    a: 5,
    say() { console.log(this.a) }
  }
  obj.say(); // 输出5
  

• 类的箭头函数类字段：本质是在构造函数中给实例绑定了一个箭头函数，this固定指向实例，不会像类的普通方法那样因为调用方式变化丢失this（比如把方法提取出来单独调用）。
• 类的普通方法：比如say() { console.log(this.a) }，它的this是在调用时绑定的，调用a.say()时指向实例，但如果做const fn = a.say; fn()，this会变成全局对象（或undefined），而箭头函数类字段不会出现这个问题。

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