Methods in ES6 objects: using arrow functions

问题:

In ES6, both of these are legal:

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?

回答1:

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.

Arrow functions cannot be used to write object methods because, as you have found, since arrow functions assume the this of the lexically enclosing function context, the this within an object definition is either the window or something else:

var foo = {     bar: () => this.baz    // this is window or something else } 

In your case, wanting to write a method on an object, you should simply use the standard function syntax, or the "shorthand method names" introduced in ES6.

There has been 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.

An earlier proposal was to reduce stroke count by using "concise bodies", allowing you not to have to write return, as in

var foo = {     function bar() this.baz                    ^^^^^^^^ "concise body" } 

but this was rejected for parseability reasons.

回答2:

In this line getOwner: => (this.owner) should be:

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

You would have to declare this into a function:

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());

回答3:

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/

文章来源: Methods in ES6 objects: using arrow functions