Help, друзья! Разбираю что такое классы и конструкторы... В коде есть комментарии
class Slider {
constructor(sliderClass) { this.images = document.querySelectorAll(`${sliderClass} img`); this.nextImg= document.querySelector(`${sliderClass} .next`); this.prevImg= document.querySelector(`${sliderClass} .prev`); // Здесь я могу вывести в консоль поля конструктора } events() { this.nextImg.addEventListener('click', this.slideNext); this.prevImg.addEventListener('click', this.slidePrev); } slideNext() { console.log(this.nextImg); // А вот здесь и в методе ниже уже undefined. Подскажите в чем причина? Что это? - потеря контекста или как то иначе называется? И как правильно получить доступ к полям } slidePrev() { console.log(this.prevImg); } } const slider1 = new Slider('.slider1'); slider1.events(); |
Все верно так и должно быть.
Ситуация не описана но можно додумать что проблема возникает в момент клика на изображение и в этот момент this ведет себя не так как ты ожидаешь. в JS this имеет динамическую природу и фактическое его значение определяется в момент фактического вызова функции |
addEventListener() создает "свой" this... Это ссылка на элемент, на котором произошло событие.
|
Цитата:
https://learn.javascript.ru/introduc...tu-cherez-this |
Спасибо, ребят. Прочел статью, понял свою ошибку. Но решения так и не нашел. Как же все таки можно вызвать this в контексте класса а не события, или как решить задачу иначе?
|
Piterom,
'click', this.slideNext.bind(this) |
|
Ребята, спасибо!
Нужно было всего лишь вызвать функцию сразу) 7 часов мучений, а дело в двух скобках))) this.nextBtn.addEventListener('click', () => this.slideNext()); |
Часовой пояс GMT +3, время: 03:23. |