JavaScript对象内使用箭头函数作为方法返回NaN是何原因

你确实是在不适合的场景使用了箭头函数，核心原因是箭头函数没有自己的this绑定。
箭头函数的this是词法绑定的，会直接继承它被定义时所在外层非箭头函数作用域的this，永远不会随着调用方式改变而改变；而普通函数的this是调用时动态绑定的，谁调用它，this就指向谁。

你的代码是在全局作用域下声明的对象字面量，对象字面量本身不会创建独立的作用域，所以patrick里的箭头函数calcBMI被定义时，外层作用域就是全局作用域，它的this直接指向全局对象（浏览器环境是window，Node.js环境是全局global对象），而不是你预期的patrick实例。
全局对象上不存在mass和height属性，读取这两个值会得到undefined，undefined和undefined做数学运算的结果就是NaN，这就是你看到异常输出的原因。

而gwen的calcBMI是普通函数，当你执行gwen.calcBMI()时，函数是被gwen这个对象调用的，内部this会自动绑定到gwen对象，能正常读取到对象上存储的体重、身高值，所以能算出正确结果。

• 定义对象方法、类方法、原型方法这类需要this指向调用实例的场景，永远不要用箭头函数。你可以用传统的普通函数写法，或者更简洁的ES6对象方法简写语法：

const patrick = {
  firstName : 'Patrick',
  lastName : 'Arnolds',
  mass : 92,
  height : 1.95,
  // ES6方法简写，和普通函数行为一致，this绑定正常
  calcBMI() {
    return this.mass / (this.height ** 2)
  }
}

• 箭头函数适合用在不需要自身this的场景：比如数组遍历的回调、定时器回调需要捕获外层作用域this的场景，这类场景下用箭头函数反而能省去手动保存this的麻烦。

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