Question

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

let result = mySelf.age();

console.log(result);

结果是NaN

请帮助我实际发生了什么事？

Answer 1

箭头函数继承了封闭的上下文（在这种情况下为Window），而不是对象上下文，而是使用普通函数。

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

要显示箭头函数接收词法this-

const o =
  { func: () => this === window }
  
console.log(o.func()) // true

Answer 2

如果使用名称mySelf而不是this（因为在这种情况下将不会引用该对象）来引用您的对象，则似乎可以正常工作。

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

Answer 3

this在这种情况下没有使用箭头功能捕获。这实际上是与经典的function定义函数的方式的主要区别。

这意味着在示例中实际执行全局对象时，this确实引用了全局对象（浏览器中的window）。

由于没有全局yearOfBirth绑定，this.yearOfBirth将返回undefined，并且用undefined执行的任何数学运算都将得到NaN。

一个简单的解决方案是使用一个函数代替function() {return 2019 - this.yearOfBirth}。（请参阅其他答案中的可执行示例）

您还可以通过使用ES2015 class关键字来使用更“面向对象”的方法，在这种情况下，箭头功能将按您预期的方式运行。

class Person {
  name = "dina";
  job = "Programmer";
  yearOfBirth = 1993;
  age = () => 2019 - this.yearOfBirth;
}

let mySelf = new Person

console.log(mySelf.age());

Answer 4

箭头函数的属性之一是该函数中使用的上下文是上部上下文。因此，this.yearOfBirth指的是yearOfBirth不存在的上下文（文档上下文）。

也不要静态使用2019。 2020比您想象的要近。

const mySelf = {
  name: 'dina',
  job: 'Programmer',
  yearOfBirth: 1993,

  age: () => Number(new Date().getFullYear()) - this.yearOfBirth,
};

const result = mySelf.age();

console.log(result);

要使其正常工作，您可以使用常规功能。

const mySelf = {
  name: 'dina',
  job: 'Programmer',
  yearOfBirth: 1993,

  age: function() { 
     return Number(new Date().getFullYear()) - this.yearOfBirth;
  },
};

const result = mySelf.age();

console.log(result);

将箭头放在对象内部时，箭头函数不起作用，调用后的结果为NaN

4 个答案: