classi es6 e "questo" con gestori di eventi

Question

giocare con alcuni es6 e si è imbattuto in un problema che non so come risolvere. Consideriamo il seguente

class Foo { 
constructor () { 
    window.addEventListener('scroll', this.watch); 
} 

watch () { 
    console.log(this); 
} 
} 

interna di watch, this è l'oggetto window, come previsto. Ma come faccio a fare riferimento a Foo? Attualmente mi aggiro su questo con il bind this.watch.bind(this) ma mi piacerebbe sapere se c'è un modo ES6 più "corretto" per ottenere questo risultato.

Answer 1

È possibile utilizzare la funzione freccia.

Un arrow function espressione (noto anche come funzione freccia grasso) presenta una sintassi più breve rispetto alle espressioni funzionali e lega lessicale il questo valore.

window.addEventListener('scroll',() => this.watch()); 

Answer 2

La parola chiave class è solo uno zucchero sintetico per la catena di ereditarietà del prototipo javascript noto. Il modo in cui funziona questo meccanismo di attribuzione è lo stesso. Continua a pensare alla classe come alla vecchia funzione che funziona, quindi può essere attribuita a quella che utilizzava la parola chiave new.

E6 è dotato di molte nuove parole chiave per rendere più familiare il javascript orientato agli oggetti. Sono contento di questo, ma tutti noi dobbiamo ricordare che le parti fondamentali sono sempre gli stessi, solo ora con alcune ombre per i nuovi arrivati: D

Ps: Dato che si sa come this è definito in Javascript, è possibile utilizzare senza un alias, come self o qualcosa del genere, nonostante sia una pratica comune.

Answer 3

Un modo ES6 puro per gestire questo (a mio parere) sarebbe quello di utilizzare il nuovo Proxy object. L'implementazione sarebbe simile a questa:

class Foo { 
    constructor() { 
     let proxy = new Proxy(this, this.watch); 

     window.addEventListener('scroll', proxy); 
    } 

    watch(e) { 
     console.log(this, e.target); 
    } 
} 

avrei incluso un esempio di Babel REPL, tuttavia, ecco il disclaimer: Babel REPL does not support the Proxy object. La tabella di compatibilità di Kangax mostra support in various Javascript engines.