Can Arrow Functions Be Used as ES6 Object Methods?

Arrow Functions in ES6 Objects: A Syntax Limbo

In ES6, object methods can be defined using traditional function syntax or the concise method syntax. However, can we leverage the newly introduced arrow functions in this context?

Attempted Usage and Error Encountered:

Attempts to use arrow functions as object methods, as shown below, result in an error:

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

Reasoning:

Arrow functions do not function as expected in object methods because they capture the lexical this value, which is outside the object's context. This results in this referring to the global this or the this of the lexically enclosing function, not the object instance.

Alternatives and Recommendations:

For object methods, traditional function syntax or the ES6 method syntax should be used:

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

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

Unbound Arrow Functions (Rejected Proposal):

There was a proposal for unbound arrow functions that would introduce a syntax similar to arrow functions but with a separate this binding. However, this proposal was rejected as it solely reduced boilerplate without offering any new functionality.

The above is the detailed content of Can Arrow Functions Be Used as ES6 Object Methods?. For more information, please follow other related articles on the PHP Chinese website!