Question

我有两个JS函数做同样的事情：

1）

var person = {
    firstName: 'John',
    surname: 'Jones',
    dob: new Date('1990-01-01'),
    isMarried: false,
    age: function() {
        return new Date().getFullYear() - this.dob.getFullYear();
    }
};

2）

var person = {
    firstName: 'John',
    surname: 'Jones',
    dob: new Date('1990-01-01'),
    isMarried: false,
    age: () => {
        return new Date().getFullYear() - this.dob.getFullYear();
    }
};

请注意，这两段代码之间的唯一区别是age（）函数的描述方式。据我了解，前者使用函数语句，而后者使用函数表达式。

但是问题是，只有前一段代码返回了预期的数据，而后者则返回了以下错误：

Uncaught TypeError: Cannot read property 'getFullYear' of undefined
    at Object.age

我试图理解为什么在语法上正确的情况下为什么一个可行而另一个却不可行？

我刚刚开始深入学习JS，因此详细而直接的答案将不胜感激。谢谢。

Answer 1

如MDN所述，箭头功能未绑定到this（除其他关键字之外）。在第二种情况下，this未定义，从而导致TypeError。

Answer 2

据我所知，前者正在使用函数语句，而后者正在使用函数表达式

两者都不是函数表达式。唯一的区别是，第一个是普通功能，第二个是ES6箭头功能。根据MDN

箭头函数 expression 是正则函数表达式的语法紧凑替代方案，尽管没有与this
的绑定

箭头功能对此没有自己的this绑定，它将使用绑定到父作用域的this。在上述情况下，父范围是全局范围。因此，this是指window对象而不是对象。

const obj = {
  method:() => console.log(this === window)
}

obj.method()

为什么此JS函数样式在检索所需数据时不起作用

2 个答案: