JS对象内箭头函数方法调用后输出undefined问题求助

你遇到的问题本质是箭头函数的this绑定规则和普通函数不同导致的：

• 箭头函数不会创建自己的this，它的this继承自外层作用域的this，你当前代码里sayTeamNames作为箭头函数，外层作用域是全局作用域（浏览器环境下是window，Node环境下是globalThis/模块导出对象），全局作用域下不存在partner1、partner2属性，所以读取结果为undefined。
• 你代码里定义的形参teamObj既没有在逻辑中使用，调用时也没有传参，对执行结果没有影响。

方案1：替换为普通函数表达式 #

对象方法使用普通函数声明时，this会自动绑定到调用该方法的对象上：

const team = {
  partner1: "Matthew",
  partner2: "Boab",
  sayTeamNames: function() {
    console.log(`${this.partner1} and ${this.partner2}`)
  }
}

team.sayTeamNames(); // 输出 Matthew and Boab

方案2：使用ES6+对象方法简写语法（本质和普通函数一致） #

const team = {
  partner1: "Matthew",
  partner2: "Boab",
  sayTeamNames() {
    console.log(`${this.partner1} and ${this.partner2}`)
  }
}

team.sayTeamNames(); // 输出 Matthew and Boab

方案3：必须使用箭头函数时，直接引用对象本身取值 #

const team = {
  partner1: "Matthew",
  partner2: "Boab",
  sayTeamNames: () => {
    console.log(`${team.partner1} and ${team.partner2}`)
  }
}

team.sayTeamNames(); // 输出 Matthew and Boab

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