Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target? Искал ответ, но сформулировать запрос трудновато. В общем, заезжанная проблема с this в js:
Deep Thought
var deepThought = {
answer: 42,
alertAnswer: function (e) {
//need 42!!
}
}
onload = function() {
document.getElementById("button").addEventListener('click', deepThought.alertAnswer);
}
alert the Answer to the Ultimate Question of Life,
The Universe, and Everything
Если просто запустить deepThought.alertAnswer(); а внутри функции прописать alert(this.answer); то всё заработает, но нужно запускать функцию через событие, а в этом случае this === e.target. Спасите мой объектно-ориентированный мозг. Альтернативные структуры приветствуются, но в итоге функция alertAnswer будет выведена в отдельный объект, а куча разных deepThought'ов с разными answer будут его наследовать. В общем, хардкод не предлагать.
Как достучаться до свойства объекта Javascript из его же функции при запуске её через EventListener или зачем this === e.target? Искал ответ, но сформулировать запрос трудновато. В общем, заезжанная проблема с this в js:
Deep Thought
var deepThought = {
answer: 42,
alertAnswer: function (e) {
//need 42!!
}
}
onload = function() {
document.getElementById("button").addEventListener('click', deepThought.alertAnswer);
}
alert the Answer to the Ultimate Question of Life,
The Universe, and Everything
Если просто запустить deepThought.alertAnswer(); а внутри функции прописать alert(this.answer); то всё заработает, но нужно запускать функцию через событие, а в этом случае this === e.target. Спасите мой объектно-ориентированный мозг. Альтернативные структуры приветствуются, но в итоге функция alertAnswer будет выведена в отдельный объект, а куча разных deepThought'ов с разными answer будут его наследовать. В общем, хардкод не предлагать.
Deep Thought
var deepThought = {
answer: 42,
alertAnswer: function (e) {
//need 42!!
}
}
onload = function() {
document.getElementById("button").addEventListener('click', deepThought.alertAnswer);
}
alert the Answer to the Ultimate Question of Life,
The Universe, and Everything
Если просто запустить deepThought.alertAnswer(); а внутри функции прописать alert(this.answer); то всё заработает, но нужно запускать функцию через событие, а в этом случае this === e.target. Спасите мой объектно-ориентированный мозг. Альтернативные структуры приветствуются, но в итоге функция alertAnswer будет выведена в отдельный объект, а куча разных deepThought'ов с разными answer будут его наследовать. В общем, хардкод не предлагать.
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
В данном случае, чтобы достучаться до свойства объекта deepThought из его функции alertAnswer, можно воспользоваться методом bind() для привязки контекста выполнения функции.
Пример:
var deepThought = {answer: 42,
alertAnswer: function () {
alert(this.answer);
}
}
document.getElementById("button").addEventListener('click', deepThought.alertAnswer.bind(deepThought));
Таким образом, при вызове функции alertAnswer через EventListener, контекст выполнения будет привязан к объекту deepThought, и вы сможете обратиться к его свойству answer.
Относительно this === e.target, в данном контексте this указывает на элемент, который вызвал событие. Таким образом, если вы хотите использовать this для доступа к свойству объекта deepThought, можно передать его в качестве параметра в функцию alertAnswer, например:
var deepThought = {answer: 42,
alertAnswer: function (element) {
alert(element.answer);
}
}
document.getElementById("button").addEventListener('click', function(e){
deepThought.alertAnswer(e.target);
});
Надеюсь, это поможет в решении вашей проблемы с контекстом this в JavaScript.