Javascript ES6 对象中的方法：使用箭头函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31095710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Methods in ES6 objects: using arrow functions
提问by fox
In ES6, both of these are legal:
在 ES6 中，这两个都是合法的：
var chopper = {
owner: 'Zed',
getOwner: function() { return this.owner; }
};
and, as shorthand:
并且，作为速记：
var chopper = {
owner: 'Zed',
getOwner() { return this.owner; }
}
Is it possible to use the new arrow functions as well? In trying something like
是否也可以使用新的箭头函数？在尝试类似
var chopper = {
owner: 'John',
getOwner: () => { return this.owner; }
};
or
或者
var chopper = {
owner: 'John',
getOwner: () => (this.owner)
};
I get a error messages suggesting that the method does not have access to this. Is this just a syntax issue, or can you not use fat-pipe methods inside of ES6 objects?
我收到一条错误消息，表明该方法无权访问this. 这只是一个语法问题，还是不能在 ES6 对象中使用胖管道方法？
回答by
Arrow functions are not designed to be used in every situation merely as a shorter version of old-fashioned functions. They are not intended to replace function syntax using the functionkeyword. The most common use case for arrow functions is as short "lambdas" which do not redefine this, often used when passing a function as a callback to some function.
箭头函数并非设计为在所有情况下仅用作旧式函数的较短版本。它们不打算使用function关键字替换函数语法。箭头函数最常见的用例是不重新定义的短“lambdas” this，通常在将函数作为回调传递给某个函数时使用。
Arrow functions cannot be used to write object methods because, as you have found, since arrow functions close over the thisof the lexically enclosing context, the thiswithin the arrow is the one that was current where you defined the object. Which is to say:
箭头函数不能用于编写对象方法，因为正如您所发现的，由于箭头函数关闭this词法封闭上下文的 ，this箭头内的 是您定义对象的当前位置。也就是说：
// Whatever `this` is here...
var chopper = {
owner: 'Zed',
getOwner: () => {
return this.owner; // ...is what `this` is here.
}
};
In your case, wanting to write a method on an object, you should simply use traditional functionsyntax, or the method syntax introduced in ES6:
在您的情况下，想要在对象上编写方法，您应该简单地使用传统function语法，或 ES6 中引入的方法语法：
var chopper = {
owner: 'Zed',
getOwner: function() {
return this.owner;
}
};
// or
var chopper = {
owner: 'Zed',
getOwner() {
return this.owner;
}
};
(There are small differences between them, but they're only important if you use superin getOwner, which you aren't, or if you copy getOwnerto another object.)
（它们之间存在细微差别，但它们仅在您使用superin时才重要getOwner，您不是，或者如果您复制getOwner到另一个对象。）
There was some debate on the es6 mailing list about a twist on arrow functions which have similar syntax but with their own this. However, this proposal was poorly received because that is mere syntax sugar, allowing people to save typing a few characters, and provides no new functionality over existing function syntax. See the topic unbound arrow functions.
在 es6 邮件列表上有一些关于箭头函数的扭曲的争论，这些函数具有相似的语法但有自己的this. 然而，这个提议并不受欢迎，因为它只是语法糖，允许人们节省输入几个字符，并且在现有函数语法上没有提供新功能。请参阅主题未绑定箭头函数。
回答by Walter Chapilliquen - wZVanG
In this line getOwner: => (this.owner)should be:
在这一行getOwner: => (this.owner)应该是：
var chopper = {
owner: 'John',
getOwner: () => this.owner
}; //here `this` refers to `window` object.
You would have to declare thisinto a function:
您必须声明this为一个函数：
var chopper = {
owner: 'John',
getOwner() { return this.owner }
};
Or:
或者：
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());回答by Isuru Maldeniya
A quick tip that I follow to use arrow functions.
我遵循的使用箭头函数的快速提示。
- Use non-arrow functions for methods that will be using
object.method()syntax. (Those are functions that will receive meaningfulthisvalue from their caller.) - Use arrow function for almost everything else.
- 将非箭头函数用于将使用
object.method()语法的方法。（这些函数会this从调用者那里获得有意义的值。） - 几乎所有其他事情都使用箭头函数。
回答by foxiris
If you have to use arrow function, you can change thisto chopper,
如果您必须使用箭头功能，您可以更改this为chopper，
var chopper = {
owner: "John",
getOwner: () => chopper.owner
};
Although this is not best practice, when you change the object name, you have to change this arrow function.
虽然这不是最佳实践，但是当您更改对象名称时，您必须更改此箭头函数。
回答by prabushitha
This inside arrow function doesn't reflect context of the object. Instead it gives the context where the object method is called.
这个内部箭头函数不反映对象的上下文。相反，它给出了调用对象方法的上下文。
Check this, This gives some insight about when to use arrow and when not. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
检查这个，这提供了一些关于何时使用箭头和何时不使用箭头的见解。 https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
