Métodos en objetos ES6: uso de funciones de flecha

En ES6, ambos son legales:

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

y, como taquigrafía:

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

¿Es posible utilizar también las nuevas funciones de flecha? Al intentar algo como

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

o

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

Recibo un mensaje de error que sugiere que el método no tiene acceso a this. ¿Es esto solo un problema de sintaxis, o no puede usar métodos fat-pipe dentro de los objetos ES6?

Las funciones de flecha no están diseñadas para usarse en todas las situaciones simplemente como una versión más corta de funciones pasadas de moda. No pretenden reemplazar la sintaxis de la función utilizando la functionpalabra clave. El caso de uso más común para las funciones de flecha es tan corto como "lambdas" que no redefinenthis , a menudo se utilizan cuando se pasa una función como una devolución de llamada a alguna función.

Las funciones de flecha no se pueden usar para escribir métodos de objeto porque, como ha encontrado, dado que las funciones de flecha se cierran sobre el thiscontexto que las encierra léxicamente, el thisinterior de la flecha es el que estaba vigente donde definió el objeto. Que es decir:

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

En su caso, si desea escribir un método en un objeto, simplemente debe usar la functionsintaxis tradicional o la sintaxis del método introducida en ES6:

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

// or

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

(Hay pequeñas diferencias entre ellos, pero solo son importantes si usa superin getOwner, que no es, o si copia getOwnera otro objeto).

Hubo cierto debate en la lista de correo de es6 sobre un giro en las funciones de flecha que tienen una sintaxis similar pero con la suya propia this. Sin embargo, esta propuesta fue mal recibida porque es un simple azúcar sintáctico, lo que permite a las personas ahorrar escribiendo algunos caracteres y no proporciona una nueva funcionalidad sobre la sintaxis de funciones existente. Consulte el tema Funciones de flechas independientes .

En esta línea getOwner: => (this.owner)debería estar:

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

Tendrías que declarar thisen una función:

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

O:

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());

Un consejo rápido que sigo para usar las funciones de flecha.

• Use funciones que no sean flechas para métodos que usarán object.method()sintaxis. (Esas son funciones que recibirán un thisvalor significativo de su interlocutor).
• Utilice la función de flecha para casi todo lo demás.

Esta función de flecha interior no refleja el contexto del objeto. En su lugar, proporciona el contexto donde se llama al método del objeto.

Compruebe esto, esto le da una idea de cuándo usar la flecha y cuándo no. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Si tiene que utilizar la función de flecha, puede cambiar thisa chopper,

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

Aunque esta no es la mejor práctica, cuando cambia el nombre del objeto, debe cambiar esta función de flecha.

Otro consejo, en modo estricto, thistodavía se refiere a Window en lugar de undefined.

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

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