带有箭头功能的 ES6 getter/setter

Question

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

const 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't use the arrow function:

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

Is this intentional?

Answer 1

According to the ES2015 grammar, a property on an object literal can only be one of three 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 = ... .

Answer 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

ie 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.

Answer 3

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

access to parent object in class

it is worked for me :P