Задать вопрос
@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 будут его наследовать. В общем, хардкод не предлагать.
  • Вопрос задан
  • 3151 просмотр
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать простой зеро блок на тильда или html блок
02 мая 2024, в 11:31
500 руб./за проект
Ищем кодера для доработки сайта на bitrix24
02 мая 2024, в 11:28
1000 руб./в час
Доработать квиз на React
02 мая 2024, в 11:14
5000 руб./за проект
Ещё заказы