Почему не может прочитать свойство?

Question

[wOneBvll]

Пишу слайдер, и не понимаю как мне либо установить this, либо по-другому обратиться к свойству объекта.
Через функцию получилось, захотелось преобразить код.

class Autoslider {
  constructor(elem) {
    this.body = elem.querySelector('.autoslider__body')
    this.content = elem.querySelector('.autoslider__content')
    this.slides = elem.querySelectorAll('.autoslider__slide')
    this.slide_active = elem.querySelector('autoslider__slide_active')
  }

  animation() {
    let slideIndex = 0;
    setInterval(showSlide, 2000);    
    function showSlide() {

      this.slides.forEach(slide => slide.classList.remove('autoslider__slide_active'))
      this.slides[slideIndex].classList.add('autoslider__slide_active');

      if (slideIndex == this.slides.length - 1) {
        slideIndex = -1;
      }
      slideIndex++;
    }
  }
}

let autoslider = new Autoslider(document.querySelector('.autoslider'))
autoslider.animation()

Comments

[Rerurk]

С классами проще на typescript

Answer 1

[WapSter]

function создает собственный контекст this, используй стрелочную функцию или бинди контекст. И ты в селекторе точку пропустил.

Answer 2

[Евгений]

Вынеси showSlide как метод класса, и обратись к нему в методе animation как this.showSlide

Либо используй стрелочную функцию, как выше подсказали

Answer 3

[Роман]

let slideIndex = 0;
    const ctx = this;

Соответственно в showSlide заменить все this на ctx