TypeScript，如何将类方法事件处理程序上下文保持为"this“实例

Question

我对TypeScript中的类有一个问题。每次我必须侦听一个HTML元素事件时，我都需要使用Function.bind()将它连接到当前实例。

class VideoAdProgressTracker extends EventDispatcher
{
    private _video:HTMLVideoElement;

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

    private handleTimeUpdateEvent(event)
    {
        // Something
    }
}

我不必每次都保存绑定的匿名函数，当你有5-10个事件时，它会变得一团糟。我只想把它捆绑起来。

有什么建议吗？

Answer 1

可以对监听程序方法使用箭头函数：

class VideoAdProgressTracker extends EventDispatcher {
    private _video:HTMLVideoElement;

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

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

这将很好地工作，除非您想要扩展这个类并覆盖其中一个方法。

这样做的原因是，使用箭头函数，你实际上没有方法，只有用箭头函数分配的属性，它们不是原型的一部分。

例如：

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

编译为：

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

因此，如果您不关心是否能够轻松覆盖这些方法之一，那么可以使用此方法。

如果您想继续使用方法，但又不想手动绑定所有方法，那么您可以：

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

您还可以检查函数名称，并以某种方式为您希望绑定的方法添加前缀。

Answer 2

您还可以缓存控制器上下文。在使用d3.js时，我经常使用这种风格。这样，我仍然可以访问回调的上下文，在d3中，它通常指的是一个DOM元素。

private onClick(): Function {
  controller: this = this;
  return function(event) {
    controller.anotherClassFunction();
  };
}

private secondFunction(): void {
  this.addEventlistener(this.onClick());
}