Question

在示例代码中，myOtherFunc打印继承的canvas变量，但是当单击画布调用myFunc时，this.canvas将打印为undefined。这是为什么？

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>

Answer 1

还有非常有用的：

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) {
    }
}

Answer 2

this是附加到<canvas>元素的click事件处理程序中的canvas元素。 this：<canvas>在问题代码的元素处没有设置.canvas属性，从而导致undefined在console

被记录

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

Answer 3

那是因为事件处理程序的范围是画布，而不是类。您需要绑定 this到事件处理程序：

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

有关bind的详情，请参阅this MDN reference。

为什么类中的事件处理程序不从该类继承变量

3 个答案: