JavaScript: удаление слушателей событий как функций Class.prototype

Question

Я пытаюсь использовать классы на основе Class.prototype в моем проекте, где у меня нет встроенных функций. Учитывая этот пример, невозможно удалить eventListener для myVideo видеообъекта, который есть в моем классе.

Это теоретический пример, а не фактический производственный код, который у меня есть.

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 и добавить и удалить прослушиватели. Мне нужно создавать и создавать множество объектов такого рода, и я боюсь утечек памяти и устойчивости объектов (все ранее созданные объекты получают событие «закончилась»), когда анонимные функции не удаляются как обработчики событий.

Или я должен просто рассмотреть другой подход (встроенные функции внутри функции initialize как обработчики событий). Они действительно влияют на читабельность и согласованность, поэтому я хочу избежать их при любых затратах.

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