Métodos em objetos ES6: usando funções de seta

No ES6, ambos são legais:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

e, como abreviação:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

É possível usar as novas funções de seta também? Em tentar algo como

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

ou

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

Recebo mensagens de erro sugerindo que o método não tem acesso a this. Isso é apenas um problema de sintaxe ou você não pode usar métodos fat-pipe dentro de objetos ES6?

As funções de seta não foram projetadas para serem usadas em todas as situações, apenas como uma versão mais curta das funções antigas. Eles não pretendem substituir a sintaxe da função usando a functionpalavra - chave. O caso de uso mais comum para funções de seta é como "lambdas" curtos que não redefinem this, geralmente usados ​​ao passar uma função como retorno de chamada para alguma função.

As funções de seta não podem ser usadas para escrever métodos de objeto porque, como você descobriu, uma vez que as funções de seta se fecham sobre o thiscontexto de inclusão lexical, o thisdentro da seta é aquele que estava atual onde você definiu o objeto. O que quer dizer:

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

No seu caso, querendo escrever um método em um objeto, você deve simplesmente usar a functionsintaxe tradicional ou a sintaxe do método introduzida no ES6:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(Existem pequenas diferenças entre eles, mas só são importantes se você usar superem getOwner, o que não é ou se copiar getOwnerpara outro objeto.)

Houve algum debate na lista de discussão es6 sobre uma variação nas funções de seta que têm sintaxe semelhante, mas com a sua própria this. No entanto, essa proposta foi mal recebida porque é um mero açúcar de sintaxe, permitindo que as pessoas economizem ao digitar alguns caracteres e não fornece nenhuma funcionalidade nova sobre a sintaxe de função existente. Consulte o tópico funções de setas não acopladas .

Nesta linha getOwner: => (this.owner)deve estar:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

Você teria que declarar thisem uma função:

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

Ou:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

Uma dica rápida que sigo para usar as funções de seta.

• Use funções que não sejam setas para métodos que usarão object.method() sintaxe. (Essas são funções que receberãothis valor de seu chamador.)
• Use a função de seta para quase tudo o mais.

Esta função de seta interna não reflete o contexto do objeto. Em vez disso, fornece o contexto onde o método do objeto é chamado.

Marque isto, isto dá algumas dicas sobre quando usar a seta e quando não. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Se você tiver que usar a função de seta, você pode mudar thispara chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

Embora esta não seja a melhor prática, ao alterar o nome do objeto, você deve alterar esta função de seta.

Outra dica, no modo estrito, thisainda se refere à janela em vez de indefinida.

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();