ES6 对象中的方法:使用箭头函数 [英] Methods in ES6 objects: using arrow functions

问题描述

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

In ES6, both of these are legal:

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

并且，简写:

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; }
};

或

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

我收到一条错误消息，提示该方法无权访问 this.这只是一个语法问题，还是你不能在 ES6 对象内部使用胖管道方法?

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?

推荐答案

箭头函数并非旨在用于所有情况，只是作为旧式函数的较短版本.它们不打算使用 function 关键字替换函数语法.箭头函数最常见的用例是不重新定义 this 的短lambdas"，通常在将函数作为回调传递给某个函数时使用.

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 function keyword. 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.

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

Arrow functions cannot be used to write object methods because, as you have found, since arrow functions close over the this of the lexically enclosing context, the this within the arrow is the one that was current where you defined the object. Which is to say:

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

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

In your case, wanting to write a method on an object, you should simply use traditional function syntax, or the method syntax introduced in ES6:

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

// or

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

(它们之间有一些细微的差别，但只有当您在 getOwner 中使用 super 时它们才重要，而您不是，或者如果您复制 getOwner 到另一个对象.)

(There are small differences between them, but they're only important if you use super in getOwner, which you aren't, or if you copy getOwner to another object.)

在 es6 邮件列表上有一些关于箭头函数的扭曲的争论，这些函数具有相似的语法，但有自己的 this.然而，这个提议并没有被接受，因为这仅仅是语法糖，允许人们节省输入几个字符，并且没有提供比现有函数语法更多的新功能.请参阅主题未绑定箭头函数.

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 对象中的方法:使用箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！