Почему this не работает?

Question

[Speakermen]

Почему в классе Player я не могу обратиться например через this почему я должен использовать player его же нет в классе. Предполагаю это из за addEventListener?

//Uncaught TypeError: this.startTrack is not a function at HTMLDivElement.prevAudio 
prevAudio() {
    this.startTrack(player)
      ? this.playAudio(--this.id)
      : this.playAudio(this.state.length - 1);

    player.displayName({
      audioName: this.state[this.id].audioName,
      author: this.state[this.id].author,
    });
  }

player.prevButton.addEventListener("click", player.prevAudio);

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/JavaScri...
Вот здесь потеряли контекст player:.addEventListener("click", player.prevAudio)

Comments

[Speakermen]

Спасибо огромное Вам!

Answer 2

[Сергей delphinpro]

недавно отвечал по этому поводу Почему переменная класса становится undefined при обращении из метода?

Comments

[Speakermen]

Спасибо огромное

[Speakermen]

Спасибо переписал. Извините но я уже минут 30 голову ломаю как player.playAudio(e) может попасть this если в методе playAudio(no params) нету параметров? Фишка что можно с помощью call, apply и bind как то параметр пробрасывать (создавать методы с параметрам и добавлять например в класс)

player.playButton.addEventListener("click", (e) => player.playAudio(e));

playAudio() {
    this.audio.play();
    this.playButton.style.display = "none";
    this.pauseButton.style.display = "block";
  }

[Сергей delphinpro]

Speakermen, так здесь и не нужно

e - это переменная события, которое передается в метод-обработчик.

//так
player.playButton.addEventListener("click", () => player.playAudio());
//либо так
player.playButton.addEventListener("click", player.playAudio.bind(player));

Первый вариант можно так переписать

player.playButton.addEventListener("click", function() {
    player.playAudio();
});

Это самый обычный вызов метода, тут контекст не теряется.