ES6对象中的方法: 使用箭头函数

在 ES6中，这两种方法都是合法的:

var chopper = {
owner: 'Zed',
getOwner: function() { return this.owner; }
};

简而言之:

var chopper = {
owner: 'Zed',
getOwner() { return this.owner; }
}

是否也可以使用新的箭头函数

var chopper = {
owner: 'John',
getOwner: () => { return this.owner; }
};

或者

var chopper = {
owner: 'John',
getOwner: () => (this.owner)
};

我得到一个错误消息，表明该方法不能访问 this。这仅仅是一个语法问题，还是不能在 ES6对象内部使用胖箭头方法？

54351 次浏览
小开

在这一行中，getOwner: () => this.owner应该是:

var chopper = {
owner: 'John',
getOwner: () => this.owner
}; //here `this` refers to `window` object.


console.log(chopper.getOwner());

您必须将 this声明为一个函数:

var chopper = {
owner: 'John',
getOwner() { return this.owner }
};


console.log(chopper.getOwner());

或者:

var chopperFn = function(){


this.setOwner = (name) => this.owner = name;
Object.assign(this,{
owner: 'Jhon',
getOwner: () => this.owner,
})


}


var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

小开
最佳答案

箭头函数并不是设计用于每种情况，只是作为老式函数的一个较短版本。它们不打算使用 function关键字替换函数语法。箭头函数最常见的用例是短的“ lambdas”，它不会重新定义 this，通常在将函数作为回调函数传递给某个函数时使用。

箭头函数不能用于编写对象方法，因为正如您所发现的，由于箭头函数关闭在词法封闭上下文的 this之上，所以箭头中的 this是当前定义对象的 this。也就是说:

// Whatever `this` is here...
var chopper = {
owner: 'Zed',
getOwner: () => {
return this.owner;    // ...is what `this` is here.
}
};

在您的例子中，想要在对象上编写一个方法，您应该简单地使用传统的 function语法，或者 ES6中引入的方法语法:

var chopper = {
owner: 'Zed',
getOwner: function() {
return this.owner;
}
};


// or


var chopper = {
owner: 'Zed',
getOwner() {
return this.owner;
}
};

(它们之间有一些细微的差别，但是只有在 getOwner中使用 super时，它们才是重要的，而这是不可能的，或者将 getOwner复制到另一个对象时，它们才是重要的。)

在 es6邮件列表中有一些关于箭头函数的争论，这些函数具有相似的语法，但是有自己的 this。然而，这个提议收效甚微，因为它仅仅是语法上的“糖”，允许人们节省输入几个字符，并且在现有的函数语法上没有提供新的功能。请参阅主题 未绑定箭头函数。

小开

这个内部箭头函数不反映对象的上下文。相反，它给出了调用对象方法的上下文。

检查这个，这给了一些关于什么时候使用箭头和什么时候不使用的洞察力。 Https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

小开

如果必须使用箭头函数，可以将 this改为 chopper,

var chopper = {
owner: "John",
getOwner: () => chopper.owner
};

虽然这不是最佳实践，但是在更改对象名称时，必须更改这个箭头函数。

小开

使用箭头函数的一个小技巧。

  • 对将使用 object.method()语法的方法使用非箭头函数。(这些函数将从调用方接收有意义的 this值。)
  • 对几乎所有其他事情使用箭头函数。
小开

另一个技巧是，在严格模式下，this仍然是指 Window 而不是未定义的。

  (() => {
"use strict";
console.log(this); // window
})();


(function () {
"use strict";
console.log(this); // undefined
})();

提交答案