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 abreviatura:

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 se pueden usar métodos de flecha ancha dentro de los objetos ES6?

Jun 28 '15 09:06 fox

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 antiguas. No pretenden reemplazar la sintaxis de la función que utiliza la functionpalabra clave. El caso de uso más común para las funciones de flecha son las "lambdas" cortas que no se redefinen thisy que a menudo se usan cuando se pasa una función como devolución de llamada a alguna función.

Las funciones de flecha no se pueden usar para escribir métodos de objetos porque, como habrá descubierto, dado que las funciones de flecha se cierran sobre el thiscontexto léxico que encierra, la thisflecha dentro de la flecha es la que estaba actual 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 functionla sintaxis 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;
    }
};

(Existen pequeñas diferencias entre ellos, pero solo son importantes si usas superin getOwner, lo cual no es así, o si copias getOwnera otro objeto).

Hubo cierto debate en la lista de correo de es6 sobre un cambio 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 mera sintaxis, lo que permite a las personas ahorrarse escribir algunos caracteres y no proporciona ninguna funcionalidad nueva sobre la sintaxis de función existente. Consulte el tema funciones de flecha independientes .

Jun 28 '2015 03:06

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

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

console.log(chopper.getOwner());

Expandir fragmento

Tendrías que declarar thisen una función:

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

console.log(chopper.getOwner());

Expandir fragmento

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

Expandir fragmento

Jun 28 '2015 02:06 Walter Chapilliquen - wZVanG

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

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

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

Feb 02 '2020 16:02 foxiris