ES6 getter/setter with arrow function

问题:

I'm using babel6 and for my pet project I'm creating a wrapper for XMLHttpRequest, for the methods I can use:

open = (method, url, something) => {
  return this.xhr.open(method, url, something);
}

but for the properties arrow function doesn't work

this works:

get status() { return this.xhr.status; }

but I can not use

get status = () => this.xhr.status;

Is this intentional?

回答1:

According to the ES2015 grammar, a property on an object literal can only be one of four things:

PropertyDefinition:

• IdentifierReference
• PropertyName : AssignmentExpression
• MethodDefinition

The only one of these type that allows a leading get is MethodDefinition:

MethodDefinition :

• PropertyName ( StrictFormalParameters ) { FunctionBody }
• GeneratorMethod
• get PropertyName ( ) { FunctionBody }
• set PropertyName ( PropertySetParameterList ) { FunctionBody }

As you can see, the get form follows a very limited grammar that must be of the form

get NAME () { BODY }

The grammar does not allow functions of the form get NAME = ....

回答2:

The accepted answer is great. It's the best if you're willing to use normal function syntax instead of compact "arrow function syntax".

But maybe you really like arrow functions; maybe you use the arrow function for another reason which a normal function syntax cannot replace you may need a different solution.

For example, I notice OP uses this, you may want to bind this lexically; aka "non-binding of this"), and arrow functions are good for that lexical binding.

You can still use an arrow function with a getter via the Object.defineProperty technique.

{
  ...
  Object.defineProperty(your_obj, 'status', { 
     get : () => this.xhr.status 
  });
  ...
}

See mentions of object initialization technique (aka get NAME() {...}) vs the defineProperty technique (aka get : ()=>{}). There is at least one significant difference, using defineProperty requires the variables already exists:

Defining a getter on existing objects

i.e. with Object.defineProperty you must ensure that your_obj (in my example) exists and is saved into a variable (whereas with a object-initialization you could return an object-literal in your object initialization: {..., get(){ }, ... }). More info on Object.defineProperty specifically, here

Object.defineProperty(...) seems to have comparable browser support to the get NAME(){...} syntax; modern browsers, IE 9.

回答3:

        _getvalue: () => {
            return this.array.length;
        }
        get value(): number {
            return this._getvalue();;
        }

access to parent object