ecmascript 6 - react - ES6 getter/setter con función de flecha

javascript class getters and setters

Question

Estoy usando babel6 y para mi proyecto de mascota estoy creando un contenedor para XMLHttpRequest, para los métodos que puedo usar:

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

pero para las propiedades la función de flecha no funciona

esto funciona:

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

pero no puedo usar

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

¿Es esto intencional?

Answer 1

De acuerdo con la gramática ES2015, una propiedad en un objeto literal solo puede ser una de cuatro cosas:

Definición de propiedad :

• IdentificadorReferencia
• PropertyName : AssignmentExpression
• Método Definición

El único de estos tipos que permite una get MethodDefinition es MethodDefinition :

Método Definición :

• PropertyName ( StrictFormalParameters ) { FunctionBody }
• Método generador
• get PropertyName ( ) { FunctionBody }
• set PropertyName ( PropertySetParameterList ) { FunctionBody }

Como puede ver, el formulario get sigue una gramática muy limitada que debe ser de la forma

get NAME () { BODY }

La gramática no permite que las funciones de la forma get NAME = ...

Answer 2

La respuesta aceptada es genial. Es mejor si está dispuesto a usar la sintaxis de función normal en lugar de la "sintaxis de función de flecha" compacta.

Pero tal vez realmente te gustan las funciones de flecha; tal vez use la función de flecha por otra razón que una sintaxis de función normal no puede reemplazar , puede necesitar una solución diferente.

Por ejemplo, noto que OP usa this , es posible que desee vincular this léxicamente; también conocido como "no vinculante de esto" ), y las funciones de flecha son buenas para ese enlace léxico.

Todavía puede usar una función de flecha con un getter mediante la técnica Object.defineProperty .

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

Consulte las menciones de la técnica de object initialization de object initialization (también conocida como get NAME() {...} ) frente a la técnica defineProperty (también conocida como get : ()=>{} ) . Hay al menos una diferencia significativa, el uso de defineProperty requiere que las variables ya existan:

Definir un captador en objetos existentes

es decir, con Object.defineProperty debe asegurarse de que your_obj (en mi ejemplo) existe y se guarda en una variable (mientras que con una object-initialization puede devolver un literal de objeto en su inicialización de objeto: {..., get(){ }, ... } ). Más información sobre Object.defineProperty específicamente, aquí

Object.defineProperty(...) parece tener compatibilidad de navegador comparable a la sintaxis get NAME(){...} ; navegadores modernos, IE 9.

Answer 3

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

acceso al objeto padre en clase

me funcionó: P