JavaScript:将事件侦听器移除为Class.prototype函数

Question

我正在尝试在我的项目中使用基于Class.prototype的类,其中我没有内联函数.考虑到这个例子,我不可能删除我在课堂上的myVideo视频对象上的eventListener .

这是一个理论上的例子,而不是我的实际生产代码.

var myClass = function () {
    this.initialize();
}

MyClass.prototype.myVideo = null;

MyClass.prototype.initialize = function () {
    this.myVideo = document.getElementById("myVideo");
    this.myVideo.addEventListener("ended", this.onMyVideoEnded, false);
    this.myVideo.play();
}

MyClass.prototype.onMyVideoEnded = function (event) {
    // cannot remove event listener here
    // this.myVideo.removeEventListener("ended", this.onMyVideoEnded, false);
}

有没有办法将处理程序保留为Class.prototype函数并添加和删除侦听器.我需要实例化并创建大量此类对象,并且在将匿名函数作为事件处理程序删除时,我担心内存泄漏和对象持久性(所有先前创建的对象都会收到"已结束"事件).

或者我应该考虑一种不同的方法(内联函数,初始化函数内部,作为事件处理程序).这些确实影响了可读性和一致性,所以我想在所有成本上避免它们.

Answer 1

您需要将您的函数onMyVideoEnded与附加它的上下文绑定:

例如:

this.myVideoEndedHandler = this.onMyVideoEnded.bind(this);
this.myVideo.addEventListener("ended", this.myVideoEndedHandler, false);

要删除侦听器,还要使用存储处理程序:

this.myVideo.removeEventListener("ended", this.myVideoEndedHandler, false);

这是因为当事件触发时你的函数onMyVideoEnded会出错this.