为何JS对象中的箭头函数无法获取属性值，传统函数却可行？

在JS对象中使用箭头函数作为方法时，无法获取对象的属性值，但传统函数表达式却能正常工作，示例如下：

箭头函数示例 #

const obj = {
    name: "StackOverflow",
    simpleMethod: () => `Hello, ${this.name}!`
};

console.log(obj.simpleMethod());

输出：

Hello, undefined!

传统函数表达式示例 #

const obj = {
    name: "StackOverflow",
    simpleMethod: function () {
        return `Hello, ${this.name}!`
    }
};

console.log(obj.simpleMethod());

输出：

Hello, StackOverflow!

为什么箭头函数无法获取属性？ #

核心区别在于箭头函数没有独立的this绑定：

• 箭头函数的this是在定义时就确定的，继承自它所在的外层作用域的this，而不是调用时的上下文对象。在你的例子里，箭头函数定义时的外层作用域是全局作用域（浏览器中是window，Node.js中是globalThis），这个作用域里没有name属性，所以this.name返回undefined。
• 传统函数表达式作为对象方法时，this的指向是调用该方法的对象（也就是obj），因此能直接访问obj的name属性。

如果想保持简洁的写法，推荐使用ES6的方法简写（本质还是传统函数，this指向调用对象）：

const obj = {
    name: "StackOverflow",
    simpleMethod() {
        return `Hello, ${this.name}!`
    }
};

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