Как передать данные в функцию через обработчик событий JavaScript

Оффтоп javascript
1

Проблема с контекстом this в обработчиках событий

Пытаюсь создать базовый класс Генератор с дочерними классами. Определил стандартный конструктор и функции родительского класса:

function Генератор() {
    this._начальныйИндекс = 0;
    this._конечныйИндекс = 61;
    alert("Генератор готов: " + this._начальныйИндекс + " " + this._конечныйИндекс);
}

Генератор.prototype.создать = function() {
    alert(this._начальныйИндекс);
}

var рабочий = new Генератор();
document.getElementById("кнопка0").addEventListener("click", рабочий.создать);

При этом this ссылается на кнопку, а this._начальныйИндекс оказывается неопределённым.

Если же я вызываю функцию так:

document.getElementById("кнопка0").addEventListener("click", рабочий.создать(рабочий._начальныйИндекс));

То функция срабатывает сразу при загрузке, а не по клику.

Наверняка, это простой вопрос, но я уже больше часа не могу найти ответ.

2

помню, запутался с этим! оберни вызов в анонимную функцию:

document.getElementById("кнопка0").addEventListener("click", function() {
    рабочий.создать();
});

контекст останется на месте. есть ещё bind(), но это сложнее. addEventListener меняет контекст на элемент, который вызвал событие.

3

addEventListener меняет контекст выполнения. Используй стрелочную функцию - она сохранит this из внешнего контекста:

document.getElementById("кнопка0").addEventListener("click", () => рабочий.создать());

Или сохрани ссылку на объект в переменную. Кстати, сколько уже изучаешь ООП в JS?

4

Да, при передаче рабочий.создать напрямую контекст теряется. Лучше всего использовать .bind() - так связь с объектом сохранится:

document.getElementById("кнопка0").addEventListener("click", рабочий.создать.bind(рабочий));

Так this всегда будет ссылаться на объект рабочий, а не на кнопку. Работает стабильно.