刪除事件偵聽器作為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參數會出錯。

Answer 2

我用這個：

this.element.handler = handler.bind(this);
this.element.removeEventListener('event', this.element.handler, false);
this.element.addEventListener('event', this.element.handler, false);

或使用WeakMap對象：

var handlers = new WeakMap();

var self = this;
handlers.set(this.element, { handler: handler.bind(self) });

var handler = handlers.get(this.element).handler;
this.element.removeEventListener('event', handler, false);
this.element.addEventListener('event', handler, false);