javascript - una - sintaxis funcion flecha

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

Question

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 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 mensajes de error que sugieren que el método no tiene acceso a this . ¿Es esto solo un problema de sintaxis, o no puede usar métodos de tubería gruesa dentro de objetos ES6?

Answer 1

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

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

Tendría 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());

Answer 2

Esta función de flecha interna no refleja el contexto del objeto. En cambio, proporciona el contexto donde se llama el método del objeto.

Verifique 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/

Answer 3

Las funciones de flecha no están diseñadas para usarse en cada situación simplemente como una versión más corta de las funciones anticuadas. No están destinados a reemplazar la sintaxis de la function utilizando la palabra clave de function . 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 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 contexto del contexto léxico, this dentro de la flecha es el que era 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 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;
    }
};

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

Hubo cierto debate en la lista de correo es6 sobre un giro en las funciones de flecha que tienen una sintaxis similar pero con su propia this . Sin embargo, esta propuesta fue mal recibida porque es una simple sintaxis de azúcar, lo que permite a las personas guardar escribiendo algunos caracteres y no proporciona nuevas funcionalidades sobre la sintaxis de funciones existente. Consulte el tema funciones de flecha independiente .

Answer 4

Sí, es posible usar funciones de flecha (con acceso a esto) en un objeto literal. Debe usar un método Object.assign ().

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

Object.assign(this, chopper);
chopper.getOwner();