Потеря this в обработчике событий в классе

Question

Есть два html-элемента и скрипт. В скрипте объявляется класс, который получает один из элементов. У класса есть три метода, первый - функция вращения полученного элемента. Второй метод создает обработчик события keydown, согласно которому он выполняет первый метод класса. Третий метод удаляет этот обработчик события. Я объявляю класс и запускаю второй метод, а третий метод вешаю onclick на кнопку. Но для первого метода происходит потеря this. Как исправить это?

class Rotate {
  constructor(rotateBlock) {
    this.block = rotateBlock;
    this.rotation = 0;
  }
  rotateFunc() {
    this.rotation += 40;
    this.block.style.transform = `rotate(${this.rotation}deg)`;
  }
  startRotate() {
    window.addEventListener('keydown', this.rotateFunc);
  }
  stopRotate() {
    window.removeEventListener('keydown', this.rotateFunc);
  }
}
let rotateBlock = document.querySelector('.block');
let stopBtn = document.querySelector('[name="stopRotate"]');
let rotate = new Rotate(rotateBlock);
rotate.startRotate();
stopBtn.addEventListener('click', rotate.stopRotate);

<div class="block">
    F
</div>
<button type="button" name="stopRotate">just stop rotate</button>

Answer 1

class Rotate {
  constructor(rotateBlock) {
    this.block = rotateBlock;
    this.rotation = 0;
    this.rotateHandler = this.rotateFunc.bind(this);
    this.stopHandler = this.stopRotate.bind(this);
  }
  rotateFunc() {
    this.rotation += 40;
    this.block.style.transform = `rotate(${this.rotation}deg)`;
  }
  startRotate() {
    window.addEventListener('keydown', this.rotateHandler);
  }
  stopRotate() {
    window.removeEventListener('keydown', this.rotateHandler);
  }
}
...
stopBtn.addEventListener('click', rotate.stopHandler);

БЛОГ НА HUSL

Потеря this в обработчике событий в классе

Ответы (1 шт):