箭头函数作为对象方法时输出undefined的原因及修复方案

你猜的没错，问题确实出在箭头函数上！咱们先看你的代码：

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

为什么会这样？ #

箭头函数的核心特性之一是没有自己的this，它的this是继承自定义时所在的词法作用域，而不是调用时的上下文。

在你的代码里，say箭头函数是在全局作用域下定义的（假设这段代码没嵌套在其他函数里），所以它的this指向全局对象（浏览器里是window，Node.js里是globalThis）。而全局对象里没有a属性，自然就输出undefined了。

怎么修复？ #

最标准的解决方案是用普通函数或者ES6的方法简写来定义对象方法，因为普通函数的this是由调用方式决定的——当你用obj.say()调用时，this会指向obj本身：

方案1：普通函数写法

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

方案2：ES6方法简写（更推荐）

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

（不推荐）硬要用箭头函数的话

如果你非要用箭头函数（不建议在对象方法场景这么做），可以直接通过闭包引用obj的属性，但这种方式有隐患——如果obj后续被重新赋值，箭头函数里的引用还是原来的对象：

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

总结 #

箭头函数适合用来捕获外部作用域的this，但完全不适合作为对象方法。对象方法就用普通函数或者方法简写，这样this的行为才符合你的预期~

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