Почему обработчики событий в классе не наследуют переменные этого класса

Question

Почему обработчики событий в классе не наследуют переменные этого класса

1

В примере кода myOtherFunc печатает унаследованную переменную canvas, но когда один клик на холсте для вызова myFunc, this.canvas печатает как неопределенный. Почему это?

HTML:

<!DOCTYPE HTML>
<html>
<body>
  <canvas id="drawCanvas" style="border:1px solid #000000;"></canvas>
  <script>
    class myClass {
      constructor() {
        this.canvas = document.getElementById('drawCanvas');
        this.ctx = this.canvas.getContext('2d');

        this.canvas.addEventListener('click', this.myFunc);

        this.myOtherFunc();
      }

      myFunc(event) {
        console.log(this.canvas);
      }

      myOtherFunc() {
        console.log(this.canvas);
      }
    }

    let c = new myClass;
  </script>
</body>
</html>

Eric HB 24 окт. 2017, в 05:02

Источник

Теги:

javascript

class

mouseevent

3 ответа

3

Также очень полезно:

this.canvas.addEventListener('click', this);

Если вы передадите объект вместо функции, тогда будет вызван handleEvent в этом объекте, и это будет объект. Внутри handleEvent вы можете проверить event.type, чтобы определить тип события. Пример:

class Foo {
    constructor(element) {
        this.element = element;
        element.addEventListener("mousedown", this);
        element.addEventListener("mousemove", this);
        element.addEventListener("mouseup", this);
    }
    handleEvent(event) {
        // all events come here, so lets redistribute them:
        this[event.type](event);
    }
    mousemove(event) {
    }
    mousedown(event) {
    }
    mouseup(event) {
    }
}

user8811940 24 окт. 2017, в 02:25

1

Это потому, что область обработчика событий - это холст, а не класс. Вам необходимо привязать this к обработчику событий:

this.canvas.addEventListener('click', this.myFunc.bind(this));

Для получения дополнительной информации о bind см этой ссылка MDN.

Sumner Evans 24 окт. 2017, в 00:32

Ещё вопросы

guest271314 · Accepted Answer · 2017-10-24T02-12-00.000Z

this сам элемент <canvas> внутри обработчика события click прикрепленного к элементу canvas. this: <canvas> не имеет свойства .canvas заданного в элементе кода в вопросе Вопрос, в результате чего undefined записывается на console

myFunc(event) {
  console.log(this);
}