为何对象中的普通函数可返回name属性，箭头函数却返回undefined？

两段代码表现不同的本质是普通函数和箭头函数的this绑定规则完全不同：

• 普通函数的this是运行时动态绑定的，遵循「谁调用就指向谁」的规则。你通过test.func()调用方法时，func内部的this就指向调用它的test对象，因此可以正常读取到test.name的值Leo。
  对应普通函数的代码逻辑：

  const test = {
    prop: 42,
    name: "Leo",
    func: function(){
         return this.name
     },
   };
  
  console.log(test.func()); // 输出 Leo
  

• 箭头函数没有自己的this，它的this继承自函数定义时所在的外层词法作用域的this，和运行时的调用方没有任何关系。你定义test对象是在全局作用域下，因此箭头函数func的this就指向全局作用域的this：浏览器环境下全局this是window对象，默认没有自定义name属性；Node.js环境下全局作用域的this是module.exports（空对象），同样没有name属性，因此最终返回undefined。
  对应箭头函数的代码逻辑：

  const test = {
    prop: 42,
    name: "Leo",
    func: () => this.name,
   };
  
  console.log(test.func()); // 输出 undefined
  

补充说明：这也是不推荐用箭头函数定义对象方法的核心原因，箭头函数的设计初衷是避免传统函数this动态绑定带来的困扰，更适合用在需要继承外层this的场景（比如定时器回调、数组遍历回调等）。

内容的提问来源于stack exchange，提问作者Jose German Perez Sanchez