Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Help, друзья! Разбираю что такое классы и конструкторы... В коде есть комментарии (https://javascript.ru/forum/misc/78259-help-druzya-razbirayu-chto-takoe-klassy-i-konstruktory-v-kode-est-kommentarii.html)

Piterom 16.08.2019 14:08

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

MallSerg 16.08.2019 14:48

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

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

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

ksa 16.08.2019 15:01

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

ksa 16.08.2019 15:03

Цитата:

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

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

Piterom 16.08.2019 20:35

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

рони 16.08.2019 20:49

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

рони 16.08.2019 20:57

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

Piterom 16.08.2019 21:24

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


Часовой пояс GMT +3, время: 04:13.