TypeScript, sınıf yöntemleri olay işleyicileri bağlamının "bu" örneğine nasıl saklanacağı

Question

TypeScript'te Classes ile ilgili bir sorunum var. Bir HTML Öğesi olaylarını dinlemek zorunda kaldığımda, geçerli örneğe bağlamak için Function.bind() öğesini kullanmam gerekir.

class VideoAdProgressTracker extends EventDispatcher 
{ 
    private _video:HTMLVideoElement; 

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

    private handleTimeUpdateEvent(event) 
    { 
     // Something 
    } 
} 

Her 5-10 olay olduğunda karışıklık yaratacak olan bağlı anonim işlevi kaydetmem gerekmez. Sadece onu bağlamak istiyorum.

herhangi bir öneriniz var mı?

Answer 1

Sen dinleyici yöntemleri için ok işlevlerini kullanabilirsiniz: Bu iyi çalışır

class VideoAdProgressTracker extends EventDispatcher { 
    private _video:HTMLVideoElement; 

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

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

, bu sınıf genişletmek ve bu yöntemlerden birini geçersiz istemedikçe.
Bunun nedeni, ok işlevlerini kullanmanızın gerçekten yöntemlere sahip olmamaları, yalnızca ok işlevleriyle atanan özelliklerin, prototipin bir parçası olmadıklarıdır. Örneğin

:

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

derler için:

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

Böylece kolayca ardından, bu yöntemlerden biri geçersiz kılmak bu yöntemi kullanmak mümkün umurumda değil eğer.

Eğer yöntemlerle kalmak istiyorum ama elle tüm yöntemleri bağlamak istemiyorsanız, o zaman yapabilirsiniz:

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); 
} 

Ayrıca fonksiyon adını ve bağlamak istediğiniz şekilde önek yöntemlerini kontrol edebilirsiniz .