ES6 getter / setter avec flèche fonction

J'utilise babel6 et pour mon projet pet je crée un wrapper pour XMLHttpRequest, pour les méthodes que je peux utiliser:

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

Mais pour les propriétés, la fonction flèche ne fonctionne pas

Cela fonctionne:

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

Mais je ne peux pas utiliser

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

Est-ce intentionnel?

44
demandé sur Gabor Dolla 2015-11-20 16:08:38

3 réponses

Selon la grammaire ES2015, une propriété sur un littéral d'objet ne peut être qu'une des quatre choses suivantes:

PropertyDefinition:

  • IdentifierReference
  • PropertyName : AssignmentExpression
  • MethodDefinition

Le seul de ces types qui permet un début get est MethodDefinition:

MethodDefinition :

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

Comme vous pouvez voir, la forme get suit une grammaire très limitée qui doit être de la forme

get NAME () { BODY }

La grammaire n'autorise pas les fonctions de la forme get NAME = ....

53
répondu apsillers 2015-11-20 14:20:49

La réponse acceptée est grande. C'est le meilleur si vous êtes prêt à utiliser syntaxe de fonction normale au lieu de compact "syntaxe de fonction de flèche".

Mais peut-être que vous aimez vraiment les fonctions de flèche; peut-être que vous utilisez la fonction de flèche pour une autre raison qu'une syntaxe de fonction normale ne peut pas remplacer vous pourriez avoir besoin d'une solution différente.

Par exemple, je remarque OP utilise this, vous pouvez bind this lexicalement; aka "non contraignant de cette"), et les fonctions de flèche sont bonnes pour cette liaison lexicale.

Vous pouvez toujours utiliser une fonction flèche avec un getter via la technique Object.defineProperty.

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

Voir les mentions de object initialization technique de (aka get NAME() {...}) vs le defineProperty technique de (aka get : ()=>{}). Il y a au moins une différence significative, en utilisant defineProperty nécessite que les variables existent déjà:

Définition d'un getter sur objets existants

C'est-à-dire avec Object.defineProperty vous devez vous assurer que your_obj (dans mon exemple) existe et est enregistré dans une variable (alors qu'avec un object-initialization Vous pouvez retourner un littéral objet dans votre initialisation d'objet: {..., get(){ }, ... }). Plus d'infos sur Object.defineProperty plus précisément, ici

Object.defineProperty(...) semble avoir un support de navigateur comparable à la syntaxe get NAME(){...}; navigateurs modernes, IE 9.

16
répondu The Red Pea 2018-05-14 19:21:38
        _getvalue: () => {
            return this.array.length;
        }
        get value(): number {
            return this._getvalue();;
        }

Accès à l'objet parent

-2
répondu hossein sedighian 2018-09-24 20:27:07