Задать вопрос
@800147
javascript

Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target?

Искал ответ, но сформулировать запрос трудновато. В общем, заезжанная проблема с this в js:
<html>
    <head>
        <title>Deep Thought</title>
        <script type="text/javascript">
var deepThought = {
    answer: 42,
    alertAnswer: function (e) {
        //need 42!!
    }
}
onload = function() {
    document.getElementById("button").addEventListener('click', deepThought.alertAnswer);
}
        </script>
    </head>
    <body>
        <button id="button">
            alert the Answer to the Ultimate Question of Life,
            The Universe, and Everything
        </button>
    </body>
</html>

Если просто запустить deepThought.alertAnswer(); а внутри функции прописать alert(this.answer); то всё заработает, но нужно запускать функцию через событие, а в этом случае this === e.target. Спасите мой объектно-ориентированный мозг. Альтернативные структуры приветствуются, но в итоге функция alertAnswer будет выведена в отдельный объект, а куча разных deepThought'ов с разными answer будут его наследовать. В общем, хардкод не предлагать.
  • Вопрос задан
  • 3189 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
нужно запускать функцию через событие, а в этом случае this === e.target

Категорически нет. При использовании addEventListener this ссылается на узел, в котором зарегистрирован обработчик.
Например, регистрируем так:

document.addEventListener('click', function (e) {
	console.log(e.target); // Где кликнули
	console.log(this); // Всегда document
}, false);


Как привязать объект активации (он же this) к строго определённому объекту (и даже не HTML-элементу)? Вам стоит почитать про bind (а также call и apply).

Итого примерно так:

document.addEventListener('click', deepThought.alertAnswer.bind(deepThought), false);
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
@Memfisrain
Например создать объект с помощью new function, сохранить ссылку в переменной на сам объект и обращаться из метода к объекту не через this, а через эту переменную:
var deepThought = new function() {
                var self = this;

                this.answer = 42;

                this.alertAnswer = function() {
                    alert(self.answer);
                };
            }
Ответ написан
3 комментария
3 комментария
@800147 Автор вопроса
Извините за флуд, но решение нашёл сам :)
document.getElementById("button").addEventListener('click', function (e) {deepThought.alertAnswer();});

А если EventListener нужно добавить внутри другой функции объекта deepThought, то оно должно выглядеть так:
var deepThought = {
    ...
    onLoad: function () {
        var a = this;
        document.getElementById("button").addEventListener('click', function (e) {a.alertAnswer();});
    }
}
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Текст из фотографии в отдельный файл
26 нояб. 2024, в 04:41
1500 руб./за проект
Выложить 75 курсов на геткурс и настроить базовые функции
26 нояб. 2024, в 02:18
15000 руб./за проект
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Ещё заказы