new构造函数创建对象与字面量对象的箭头函数方法差异

核心原因：箭头函数的this是定义时从外层词法作用域捕获，固定绑定不会随调用方式改变，二者的show方法定义时的外层作用域完全不同。 #

1. 实例a的show方法绑定逻辑

构造函数执行时的this默认指向new关键字创建的新实例：

function A(){
   // 构造函数内部this === 新创建的实例对象
   this.number = 10;
   // 箭头函数定义时，直接捕获外层作用域（即构造函数A的作用域）的this
   this.show = () => console.log(this.number)
}
let a = new A();

所以a的show方法里的this已经永久绑定到a实例，调用a.show()自然取到a.number = 10。

2. 字面量对象b的show方法绑定逻辑

对象字面量不会创建独立的词法作用域：

// 定义b的外层作用域是全局作用域（浏览器下为window，Node下为globalThis）
let b = {
   number: 20,
   // 箭头函数定义时，捕获外层的全局作用域的this，和b对象本身没有关系
   show: () => console.log(this.number)
}

全局作用域下没有定义number变量，因此b.show()输出undefined。如果提前给全局作用域添加number属性即可验证：

window.number = 30; // 浏览器环境下
b.show() // 输出30

补充误区说明

只有普通函数作为对象方法调用时，才会将this绑定到对象本身，这个规则对箭头函数完全不生效。如果把b的show改成普通函数，就会得到预期的20：

let b = {
   number: 20,
   show() {console.log(this.number)}
}
b.show() // 输出20

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