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 usar las nuevas funciones de flecha también? 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 de flecha gruesa 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 las funciones antiguas. No pretenden reemplazar la sintaxis de la function usando la palabra clave de función. El caso de uso más común para las funciones de flecha es como "lambdas" cortas que no redefinen this , a menudo se usa 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 objetos porque, como ha descubierto, dado que las funciones de flecha se cierran sobre el this del contexto que lo encierra léxicamente, el this dentro 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 sintaxis de function tradicional o la sintaxis de 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 usa super en getOwner , que no es así, o si copia getOwner a 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 su propio 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 .
En esta línea getOwner: () => this.owner debería ser:
var chopper = { owner: 'John', getOwner: () => this.owner }; //here `this` refers to `window` object. Tendrías que declarar this en 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());Si tiene que usar la función de flecha, puede cambiar this a 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.