对象中定义箭头函数调用后返回NaN，请求解析问题原因

这个问题的核心在于箭头函数的this绑定规则和普通函数完全不同，咱们一步步拆解清楚：

1. 箭头函数的this到底指向哪里？ #

箭头函数不会创建属于自己的this上下文，它的this是直接继承自定义时所在的外层作用域的this，而不是调用时的上下文对象。

看你的代码：

var mySelf = {
  name: "dina",
  job: "Programmer",
  yearOfBirth: 1993,
  age: () => 2019 - this.yearOfBirth
};

当定义age这个箭头函数时，它的外层作用域是全局作用域（对象字面量本身不会形成独立作用域），所以这里的this指向全局对象（浏览器环境是window，Node.js环境是global）。而全局对象上并没有yearOfBirth属性，因此this.yearOfBirth的值是undefined，2019 - undefined的结果自然就是NaN了。

2. 怎么解决这个问题？ #

有两种简单且规范的写法：

方法一：使用普通函数 #

普通函数的this是在调用时确定的，当你用mySelf.age()调用时，this会自动指向mySelf对象，就能正确访问到yearOfBirth：

var mySelf = {
  name: "dina",
  job: "Programmer",
  yearOfBirth: 1993,
  age: function() {
    return 2019 - this.yearOfBirth;
  }
};
let result = mySelf.age();
console.log(result); // 输出26

方法二：使用ES6方法简写（推荐） #

这是对象方法的标准简写形式，本质和普通函数一致，this会正确绑定到调用它的对象：

var mySelf = {
  name: "dina",
  job: "Programmer",
  yearOfBirth: 1993,
  age() {
    return 2019 - this.yearOfBirth;
  }
};
let result = mySelf.age();
console.log(result); // 输出26

总结一下：如果你的方法需要访问对象自身的属性，就别用箭头函数，改用普通函数或ES6方法简写就可以解决问题啦～

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