TypeScript, jak zachować kontekst procedur obsługi zdarzeń klas do "tej" instancji

Question

Mam problem z klasami w TypeScript. za każdym razem, gdy muszę wysłuchać zdarzeń elementu HTML, muszę użyć funkcji Function.bind(), aby połączyć ją z bieżącą instancją.

class VideoAdProgressTracker extends EventDispatcher 
{ 
    private _video:HTMLVideoElement; 

    constructor(video:HTMLVideoElement) 
    { 
     super(); 
     this._video = video; 
     this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent); 
    } 

    private handleTimeUpdateEvent(event) 
    { 
     // Something 
    } 
} 

Nie muszę zapisywać związanej anonimowej funkcji za każdym razem, gdy masz 5-10 zdarzeń stanie się bałagan. Chcę po prostu to związać.

jakieś sugestie?

Answer 1

Można użyć funkcji strzałek do metod detektora:

class VideoAdProgressTracker extends EventDispatcher { 
    private _video:HTMLVideoElement; 

    constructor(video:HTMLVideoElement) { 
     super(); 
     this._video = video; 
     this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent); 
    } 

    private handleTimeUpdateEvent = (event) => { 
     // Something 
    } 
} 

to będzie działać dobrze, jeśli nie chcesz, aby rozszerzyć tę klasę i zastąpić jedną z tych metod.
Powodem tego jest to, że za pomocą funkcji strzałek nie masz naprawdę metod, tylko właściwości, które są przypisane funkcjami strzałek, nie są częścią prototypu.

Na przykład:

class A { 
    fn1 =() => { } 
    fn2() { } 
} 

gromadzi do:

var A = (function() { 
    function A() { 
     this.fn1 = function() { }; 
    } 
    A.prototype.fn2 = function() { }; 
    return A; 
}()); 

Więc jeśli nie dbają o byciu w stanie łatwo zastąpić jedną z tych metod, a następnie użyć tej metody.

Jeśli chcesz pozostać z metod, ale nie chce ręcznie powiązać wszystkie metody, a następnie można:

constructor(video:HTMLVideoElement) { 
    super(); 
    this._video = video; 

    for (let key in this) { 
     if (typeof this[key] === "function") { 
      this[key] = this[key].bind(this); 
     } 
    } 

    this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent); 
} 

Można również sprawdzić nazwę stanowiska i jakoś prefiksu metody, które chcesz powiązać .