Здравствуйте. Если соберетесь отвечать, то прочитайте пожалуйста текст полностью. Вопрос не в поиске решения, а в правильности понимания работы некоторых моментов js.
Проще всего будет показать на примере какого-то кода.
Например, есть объект, который управляет всплывающим окном с кнопкой.
function Popup() {
this.btn = document.querySelector("#popup .btn");
this.btnHandler = function() {
console.log("из объекта");
}
this.btn.addEventListener("click", this.btnHandler);
}
После создания объекта, в зависимости от потребности мы хотим свободно переопределять обработчик клика по кнопке в окне.
var pup = new Popup();
pup.btnHandler = function() {
console.log("вне объекта");
}
По моей наивности это было вроде логично.
Есть переменная, которая хранит функцию для вызова.
При активации события, дергается переменная указанная в addEventListener и отрабатывает нужная функция хранящаяся в ней.
Но это не работает, все равно выводиться "из объекта".
Поразмыслив немного, я вроде бы понял в чем дело и хочу удостовериться все ли так (поиск мне не выдал точного ответа).
Во первых addEventListener принимает не что-то, а функцию, в данном случае анонимную функцию.
А во вторых this.btnHandler просто переменная, которая что-то хранит (в данном случае функцию), а не функция сама по себе, то есть не имя функции.
То есть когда отрабатывает код
this.btn.addEventListener("click", this.btnHandler);
this.btnHandler просто вернет эту анонимную функцию, а это равносильно
this.btn.addEventListener("click", function() {
console.log("из объекта");
});
Следовательно addEventListener запомнит только эту анонимную функцию и будет вызывать только ее при активации события. При этом эта функция будет отдельно висеть в памяти?
