metodi negli oggetti ES6: utilizzando le funzioni di freccia

Question

In ES6, entrambe queste sono legali:

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

e, come abbreviazione:

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

E 'possibile utilizzare le nuove funzioni di direzione, nonché ? Nel cercare 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 suggeriscono che il metodo non ha accesso a this. Si tratta solo di un problema di sintassi o non è possibile utilizzare i metodi di pipe grasse all'interno degli oggetti ES6?

Answer 1

Le funzioni di freccia non sono progettate per essere utilizzate in ogni situazione semplicemente come una versione più breve di funzioni vecchio stile. Non intendono sostituire la sintassi della funzione utilizzando la parola chiave function. Il caso d'uso più comune per le funzioni a freccia è il breve "lambda" che non ridefinisce lo this, spesso usato quando si passa una funzione come callback a una funzione.

funzioni Freccia non possono essere usati per scrivere i metodi degli oggetti perché, come hai trovato, poiché le funzioni di direzione assumono il this del contesto funzione di lessicale che racchiude, il this all'interno di una definizione di un oggetto è o la finestra o qualcosa d'altro:

var foo = { 
    bar:() => this.baz // this is window or something else 
} 

Nel tuo caso, volendo scrivere un metodo su un oggetto, dovresti semplicemente usare lo standard function syntax, oi "nomi dei metodi abbreviati" introdotti in ES6.

C'è stato qualche dibattito sulla mailing list es6 su un twist sulle funzioni di freccia che hanno una sintassi simile ma con il proprio this. Tuttavia, questa proposta è stata scarsamente accolta perché si tratta semplicemente di zucchero sintattico, che consente alle persone di salvare la digitazione di pochi caratteri e non fornisce nuove funzionalità rispetto alla sintassi delle funzioni esistente. Vedere l'argomento unbound arrow functions.

una precedente proposta era quello di ridurre il numero di ictus utilizzando "corpi sintetici", che consente di non dover scrivere return, come in

var foo = { 
    function bar() this.baz 
        ^^^^^^^^ "concise body" 
} 

ma questo è stata respinta per motivi parseability.

Answer 2

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

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

Si dovrebbe dichiarare this in una funzione:

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

Oppure:

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 3

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

Verificare questo, questo dà alcune informazioni su quando utilizzare la freccia e quando no. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/