ES6 getter / setter con función de flecha


Estoy usando babel6 y para mi proyecto favorito estoy creando un wrapper 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 arrow no funciona

Esto funciona:

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

Pero no puedo usar

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

¿Es esto intencional?

Author: Gabor Dolla, 2015-11-20

3 answers

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

Definición de propiedad :

  • IdentifierReference
  • PropertyName : AssignmentExpression
  • Definición del método

El único de estos tipos que permite un liderato get es Definición del método:

Definición del método :

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

As puedes ver, la forma get sigue una gramática muy limitada que debe ser de la forma

get NAME () { BODY }

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

 53
Author: apsillers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-20 14:20:49

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

Pero tal vez realmente le 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 enlazar this léxicamente; también conocido como"no vinculante de esto" ), y las funciones de flecha son buenas para esa unión léxica.

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

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

Ver menciones de object initialization technique (alias get NAME() {...}) contra el defineProperty technique (alias get : ()=>{}). Hay al menos una diferencia significativa, usando defineProperty requiere que las variables ya existan:

Definiendo un getter sobre 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 un object-initialization podría devolver un objeto-literal en su inicialización de objeto: {..., get(){ }, ... }). Más información sobre Object.defineProperty específicamente, aquí

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

 16
Author: The Red Pea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-14 19:21:38
        _getvalue: () => {
            return this.array.length;
        }
        get value(): number {
            return this._getvalue();;
        }

Acceso al objeto padre

 -2
Author: hossein sedighian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-24 20:27:07