ES6 getter / setter com função de seta

100

Estou usando o babel6 e para meu projeto de estimação estou criando um wrapper para XMLHttpRequest, para os métodos que posso usar:

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

mas para a função de seta de propriedades não funciona

isso funciona:

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

mas eu não posso usar

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

Isso é intencional?

ecmascript-6 babeljs

— Gabor Dolla
fonte

Você não precisa das chaves ou do retorno; você pode apenas dizer (method, url, something) => this.xhr.open(method. url, something).

geté uma parte de um literal de objeto ou de uma definição de classe, uma atribuição de variável não. Por que você acha que eles deveriam funcionar da mesma forma?

— Bergi de

status => this.xhr.status(sintaxe c # 7) ou talvez get status() => this.xhr.statusfosse realmente um ótimo açúcar sintático para legibilidade, mas o Javascript e não o Typescript (ainda?) não o suporta

— Charles HETIER

Respostas:

109

De acordo com a gramática ES2015, uma propriedade em um objeto literal pode ser apenas uma de quatro coisas:

PropertyDefinition :

IdentifierReference

PropertyName : AssignmentExpression

MethodDefinition

O único desse tipo que permite uma liderança geté MethodDefinition :

Definição do Método :

PropertyName ( StrictFormalParameters ) { FunctionBody }

GeneratorMethod

get PropertyName ( ) { FunctionBody }

set PropertyName ( PropertySetParameterList ) { FunctionBody }

Como você pode ver, a getforma segue uma gramática muito limitada que deve ser da mesma forma

get NAME () { BODY }

A gramática não permite funções da forma get NAME = ....

— Apsillers
fonte

Obrigado pela ajuda, aceito sua resposta. Você sabe onde está definido que getter / setter não pode ser usado com uma atribuição? Apenas curioso.

— Gabor Dolla de

@GaborDolla Editado para se referir à gramática literal do objeto na especificação ECMAScript.

— apsillers de

A resposta aceita é ótima. É melhor se você estiver disposto a usar a sintaxe de função normal em vez da "sintaxe de função de seta" compacta.

Mas talvez você realmente goste das funções de seta; talvez você use a função de seta por outro motivo que uma sintaxe de função normal não pode substituir ; você pode precisar de uma solução diferente.

Por exemplo, noto que o OP usa this, você pode querer vincularthis lexicamente; também conhecido como "não vinculativo deste" ), e as funções de seta são boas para esse vínculo léxico.

Você ainda pode usar uma função de seta com um getter por meio da Object.definePropertytécnica.

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

Veja menções de object initializationtécnica (aka get NAME() {...}) vs a definePropertytécnica (aka get : ()=>{}) . Há pelo menos uma diferença significativa, o uso definePropertyrequer as variáveis já existentes:

Definindo um getter em objetos existentes

ou seja, com Object.definePropertyvocê deve garantir que your_obj(no meu exemplo) existe e é salvo em uma variável (enquanto com um object-initializationvocê poderia retornar um objeto-literal na inicialização do objeto:) {..., get(){ }, ... }. Mais informações Object.definePropertyespecificamente aqui

Object.defineProperty(...)parece ter suporte de navegador comparável à get NAME(){...}sintaxe; navegadores modernos, IE 9.

— The Red Pea
fonte

Inteligente, mas no final das contas é muito mais detalhado do que apenas:get status() { return this.xhr.status; }

— devuxer

@devuxer Concordo que é muito prolixo. Mas, só para ficar claro, você this deve ser o objeto em que get status() { ... }está definido. Mas meu this poderia ser outra coisa, devido a diferenças de ligação lexical, certo?

— The Red Pea

Concordo ... embora na prática, eu não tenha encontrado um caso em thisque não seja o que eu quero em um acessor get. (Os thisbenefícios de ligação das funções de seta parecem entrar em

— ação

Eu concordo, eu freqüentemente uso flecha gorda + ligações lexicais ()=>{}para os callbacks que eu passo para uma promessa , como $http(...).then((promise_result)=> this...})). Se eu não usar flecha gorda, thisrepresentará o Windowobjeto global ; não é muito útil. Mas eu raramente (nunca?) Usei ()=>{}como função para um "get accessor" como você diz ... pelo menos thisdentro de get()representará o objeto no qual get()está definido (que já é mais útil do que Window; portanto, não há necessidade de usar uma função de seta gorda!)

— The Red Pea