Metodi negli oggetti ES6: utilizzo delle funzioni freccia

In ES6, entrambi sono legali:

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

e, come abbreviazione:

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

È possibile utilizzare anche le nuove funzioni freccia? Nel provare qualcosa di simile

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

o

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

Ricevo un messaggio di errore che suggerisce che il metodo non ha accesso a this. È solo un problema di sintassi o non è possibile utilizzare metodi fat-pipe all'interno degli oggetti ES6?

Le funzioni freccia non sono progettate per essere utilizzate in ogni situazione semplicemente come una versione più breve di funzioni antiquate. Non intendono sostituire la sintassi della funzione utilizzando la functionparola chiave. Il caso d'uso più comune per le funzioni freccia è costituito da brevi "lambda" che non vengono ridefiniti this, spesso utilizzati quando si passa una funzione come callback a qualche funzione.

Le funzioni freccia non possono essere utilizzate per scrivere metodi oggetto perché, come hai scoperto, poiché le funzioni freccia si chiudono sul thiscontesto lessicale che lo racchiude, l' thisinterno della freccia è quello corrente nel punto in cui hai definito l'oggetto. Vale a dire:

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

Nel tuo caso, volendo scrivere un metodo su un oggetto, dovresti semplicemente usare la functionsintassi tradizionale , o la sintassi del metodo introdotta in ES6:

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

// or

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

(Ci sono piccole differenze tra loro, ma sono importanti solo se usi superin getOwner, cosa che non sei o se copi getOwnersu un altro oggetto.)

C'è stato un dibattito sulla mailing list es6 su una svolta nelle funzioni freccia che hanno una sintassi simile ma con la propria this. Tuttavia, questa proposta è stata accolta male perché si tratta di un semplice zucchero sintattico, che consente alle persone di risparmiare digitando alcuni caratteri e non fornisce nuove funzionalità rispetto alla sintassi delle funzioni esistenti. Vedere l'argomento Funzioni delle frecce non associate .

In questa riga getOwner: => (this.owner)dovrebbe essere:

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

Dovresti dichiarare thisin una funzione:

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 rapido suggerimento che seguo per utilizzare le funzioni freccia.

• Usa funzioni non freccia per i metodi che useranno la object.method()sintassi. (Queste sono funzioni che riceveranno un thisvalore significativo dal loro chiamante.)
• Usa la funzione freccia per quasi tutto il resto.

Questa funzione freccia interna non riflette il contesto dell'oggetto. Invece fornisce il contesto in cui viene chiamato il metodo dell'oggetto.

Controlla questo, questo fornisce alcune informazioni su quando usare la freccia e quando no. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Se devi usare la funzione freccia, puoi passare thisa chopper,

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

Sebbene questa non sia una procedura ottimale, quando si modifica il nome dell'oggetto, è necessario modificare questa funzione della freccia.

Un altro suggerimento, in modalità rigorosa, thissi riferisce ancora a Window invece che a undefined.

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

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