Question

let objNewWay = {
  width:400,
  height:300,
  area: () => this.width*this.height
};

console.log(objNewWay.area()); // NaN

let objOldWay = {
  width:400,
  height:300,
  area: function() {
    return this.width*this.height;
  }
};

console.log(objOldWay.area()); // 120000

我不明白为什么Javascript对象中的箭头功能似乎不起作用。如果查看上面的代码，第一个console.log打印NaN，第二个打印出预期的数字。

https://jsbin.com/pazazikayi/edit?js,console

Answer 1

来自documentation：

箭头函数表达式的语法短于函数表达式和不绑定自己的此，参数，超级，或者的 new.target 即可。这些函数表达式最适合非方法函数，它们不能用作构造函数。

你必须像你已经展示的那样使用旧的方式

area: function() {
   return this.width*this.height;
}

如果您仍想使用箭头功能，则必须自行调用对象

＆＃13;

let objNewWay = {
  width:400,
  height:300,
  area: ()=> objNewWay.width*objNewWay.height
};

console.log(objNewWay.area()); // NaN

＆＃13;

Answer 2

arrow functions不是lambdas，你使用它的方式将引用与你的对象不同的范围。

例如，从控制台：

let theObj = {
    whereAmI: () => console.log(this)
}

theObj.whereAmI();

// Window...

如果您想使用this关键字，请使用area: function(){}方式。

Javascript对象中的箭头功能

2 个答案: