Help, друзья! Разбираю что такое классы и конструкторы... В коде есть комментарии

[Piterom]

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();

[MallSerg]

Все верно так и должно быть.

Ситуация не описана но можно додумать что проблема возникает в момент клика на изображение и в этот момент this ведет себя не так как ты ожидаешь.

в JS this имеет динамическую природу и фактическое его значение определяется в момент фактического вызова функции

[ksa]

addEventListener() создает "свой" this... Это ссылка на элемент, на котором произошло событие.

[ksa]

Ситуация не описана

Описана в доке на addEventListener()...
https://learn.javascript.ru/introduc...tu-cherez-this

[Piterom]

Спасибо, ребят. Прочел статью, понял свою ошибку. Но решения так и не нашел. Как же все таки можно вызвать this в контексте класса а не события, или как решить задачу иначе?

[рони]

Piterom,
'click', this.slideNext.bind(this)

[рони]

Piterom,
https://javascript.ru/forum/events/7...tml#post511173

[Piterom]

Ребята, спасибо!
Нужно было всего лишь вызвать функцию сразу) 7 часов мучений, а дело в двух скобках)))
this.nextBtn.addEventListener('click', () => this.slideNext());