对象内箭头函数搭配模板字面量时name值返回undefined求助

嘿，别担心呀！刚接触JavaScript遇到this相关的问题太正常了，真的不是什么低级错误～

核心问题出在箭头函数和普通函数的this指向规则完全不一样：

• 当你用普通函数作为对象的方法时，函数执行时的this会指向调用这个方法的对象（也就是你的person对象），所以this.name能正确读取到对象里的name属性。
• 但箭头函数没有属于自己的this绑定，它会“捕获”自己定义时所在的外层作用域的this。如果你的person对象是在全局作用域下定义的，那箭头函数里的this就会指向全局对象（浏览器环境是window，Node.js环境是global），而全局作用域里并没有name这个变量，所以自然返回undefined了。

给你举个代码对比就一目了然：

正常工作的普通函数写法： #

const person = {
  name: 'Alice',
  sayHello: function() {
    return `Hello, I'm ${this.name}`;
  }
};
console.log(person.sayHello()); // 输出：Hello, I'm Alice

这里调用person.sayHello()时，this直接指向person对象，所以能拿到正确的name值。

出问题的箭头函数写法： #

const person = {
  name: 'Alice',
  sayHello: () => {
    return `Hello, I'm ${this.name}`; // this指向全局对象，无name属性
  }
};
console.log(person.sayHello()); // 输出：Hello, I'm undefined

箭头函数里的this压根不是person，而是它定义时的外层作用域的this，所以找不到name。

正确的替代方案： #

如果要写对象的方法，别用箭头函数，可以用普通函数，或者更简洁的ES6方法简写：

const person = {
  name: 'Alice',
  sayHello() { // ES6方法简写，效果和普通函数一致
    return `Hello, I'm ${this.name}`;
  }
};

这样就完全没问题啦！

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