ES6 getter/setter con función de flecha

4 minutos de lectura

avatar de usuario
Gabor Dolla

Estoy usando babel6 y para mi proyecto favorito estoy creando un envoltorio para XMLHttpRequestpara los métodos que puedo usar:

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

Pero para la función de flecha de propiedades no funciona. Esto funciona:

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

Pero no puedo usar la función de flecha:

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

¿Es esto intencional?

  • No necesita los corchetes ni el retorno; solo puedes decir (method, url, something) => this.xhr.open(method. url, something).

    usuario663031

    20 de noviembre de 2015 a las 14:06

  • get es parte de un literal de objeto o una definición de clase, una asignación de variable no lo es. ¿Por qué crees que deberían funcionar igual?

    – Bergi

    20 de noviembre de 2015 a las 14:22

  • status => this.xhr.status (sintaxis c # 7) o tal vez get status() => this.xhr.statusde hecho, habría sido un gran azúcar sintáctico para la legibilidad, pero Javascript no Typescript no lo admite (¿todavía?)

    – Charles HETIER

    28 de mayo de 2019 a las 15:01


  • Necesito tanto esto en mi vida!!!

    – Cristián E.

    30 de agosto de 2021 a las 12:34

avatar de usuario
apsilleres

Según la gramática ES2015, una propiedad en un objeto literal solo puede ser una de tres cosas:

Definición de propiedad:

  • IdentificadorReferencia
  • Nombre de la propiedad : AsignaciónExpresión
  • MétodoDefinición

El único de este tipo que permite una conducción get es MétodoDefinición:

MétodoDefinición :

  • Nombre de la propiedad ( Parámetros formales estrictos ) { FunciónCuerpo }
  • GeneradorMétodo
  • get Nombre de la propiedad ( ) { FunciónCuerpo }
  • set Nombre de la propiedad ( PropertySetParameterListPropertySetParameterList ) { FunciónCuerpo }

Como puedes ver, el get form 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 = ....

  • Gracias por tu ayuda, acepto tu respuesta. ¿Sabe dónde está definido que getter/setter no se puede usar con una asignación? Sólo curioso.

    – Gabor Dolla

    20 de noviembre de 2015 a las 13:20

  • @GaborDolla Editado para hacer referencia a la gramática literal del objeto en la especificación ECMAScript.

    – apsillers

    20 de noviembre de 2015 a las 13:31

avatar de usuario
el guisante rojo

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

Pero tal vez realmente te gusten las funciones de flecha; tal vez usas la función de flecha por otra razón que una sintaxis de función normal no puede reemplazar; es posible que necesite una solución diferente.

Por ejemplo, noto que OP usa thises posible que desee unir this léxicamente; también conocido como “no vinculante de esto”), y las funciones de flecha son buenas para esa vinculación léxica.

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

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

Ver menciones de object initialization técnica (también conocido como get NAME() {...}) contra el defineProperty técnica (también conocido como get : ()=>{}). Hay al menos una diferencia significativa, usando defineProperty requiere que las variables ya existan:

Definición de un getter en objetos existentes

es decir, con Object.defineProperty debes asegurarte 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 la inicialización de su objeto: {..., get(){ }, ... }). Más información sobre Object.defineProperty específicamente, aquí

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

  • Inteligente, pero en última instancia es mucho más detallado que solo: get status() { return this.xhr.status; }

    – devuxer

    24 de febrero de 2018 a las 1:23

  • @devuxer Estoy de acuerdo en que es demasiado detallado. Pero para que quede claro, su this deber ser el objeto en el que tu get status() { ... } se define. Pero mi this pudo ser otra cosa, debido a las diferencias de unión léxica, ¿verdad?

    – El guisante rojo

    24 de febrero de 2018 a las 17:54

  • De acuerdo… aunque en la práctica, no me he encontrado con un caso en el que this no es lo que quiero en un descriptor de acceso get. (Los this Los beneficios vinculantes de las funciones de flecha parecen entrar en juego cuando se pasan funciones, como con los controladores de eventos y las devoluciones de llamada).

    – devuxer

    26 de febrero de 2018 a las 20:37


  • Estoy de acuerdo, con frecuencia uso flechas gruesas + enlaces léxicos ()=>{} para las devoluciones de llamadas paso a un Promesame gusta $http(...).then((promise_result)=> this...})). Si no uso fat-arrow, this representará el mundo Window objeto; no muy útil Pero rara vez (¿nunca?) he usado ()=>{} como la función para “obtener acceso” como dices … al menos this dentro de get() representará el objeto sobre el que get() se define (que ya es más útil que Window; ¡así que no hay necesidad de usar una función de flecha gruesa!)

    – El guisante rojo

    26 de febrero de 2018 a las 20:48

  • los defineProperty El enfoque es útil en bucles. En este momento solo lo usé para exponer algunas propiedades de un objeto chiledo del que lo contiene.

    –Edurne Pascual

    17 oct 2020 a las 11:24

¿Ha sido útil esta solución?