es6 klasy i "to" z procedurami obsługi zdarzeń

Question

zabawy z niektórymi es6 i wpadł na problem, nie jestem pewien, jak rozwiązać. rozważyć następujące

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

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

wewnątrz watch, this jest przedmiotem window, jak oczekiwano. Ale jak mam się odwołać do Foo? Obecnie obejmuję to za pomocą binda this.watch.bind(this), ale chciałbym wiedzieć, czy istnieje bardziej "właściwy" sposób ES6, aby to osiągnąć.

Answer 1

Możesz użyć funkcji strzałki.

arrow function wyrażenie (znany również jako funkcja strzałki tłuszczu) ma składnię krótszy w porównaniu do ekspresji funkcji i lexically wiąże this wartość.

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

Answer 2

Słowo kluczowe class jest po prostu syntaktycznym cukrem dla znanego łańcucha dziedziczenia prototypów javascript. Sposób działania tego mechanizmu atrybucji jest taki sam. Po prostu myśl o klasie jako starej dobrej funkcji, która działa z tym, więc można ją przypisać temu, który użył słowa kluczowego new.

E6 zawiera mnóstwo nowych słów kluczowych, dzięki którym javascript zorientowany obiektowo jest bardziej znany. Jestem zadowolony z tego, ale wszyscy musimy pamiętać, że podstawowe części są wciąż takie same, tylko teraz z niektórych cieni dla początkujących: D

Ps: Zważywszy, że wiesz, jak this jest zdefiniowana w JavaScript, możesz użyć bez aliasu, jak np. self lub coś podobnego, mimo że jest to powszechna praktyka.

Answer 3

Czysty sposób ES6 radzenia sobie z tym (moim zdaniem) byłoby użycie nowego Proxy object. Realizacja będzie wyglądać mniej więcej tak:

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

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

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

bym obejmowały przykład Babel rEPL jednak tu jest zrzeczenie: Babel REPL does not support the Proxy object. Tabela kompatybilności Kangax pokazuje support in various Javascript engines.