class - emitters - TypeScript, cómo mantener el método de los manejadores de eventos de los métodos de clase en "esta" instancia

eventemitter()

Question

Tengo un problema con Classes en TypeScript. cada vez que tengo que escuchar un evento de elemento HTML, necesito usar Function.bind () para conectarlo a la instancia actual.

class VideoAdProgressTracker extends EventDispatcher
{
    private _video:HTMLVideoElement;

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

    private handleTimeUpdateEvent(event)
    {
        // Something
    }
}

No tengo que guardar la función anónima encuadernada cada vez que tenga 5-10 eventos se convertirá en un desastre. Solo quiero tenerlo atado.

¿alguna sugerencia?

Answer 1

Puede usar las funciones de flecha para los métodos de escucha:

class VideoAdProgressTracker extends EventDispatcher {
    private _video:HTMLVideoElement;

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

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

Esto funcionará bien, a menos que desee extender esta clase y anular uno de estos métodos.
La razón para esto es que al usar las funciones de flecha no tiene realmente métodos, solo propiedades que están asignadas con funciones de flecha, no son parte del prototipo.

Por ejemplo:

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

Compila para:

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

Entonces, si no te importa anular fácilmente uno de estos métodos, utiliza este método.

Si desea permanecer con los métodos pero no desea vincular manualmente todos los métodos, puede:

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

También puede verificar el nombre de la función y, de alguna manera, los métodos de prefijo que desea vincular.