时间戳

首页 > 解决方案 > 尝试在 JavaScript 中调用同一类中的函数时出现未捕获的 TypeError

javascript - 尝试在 JavaScript 中调用同一类中的函数时出现未捕获的 TypeError

问题描述

我试图使用 OOP 概念移动画布中绘制的对象。基本上，画布内有一个正方形。

Class Canvas具有属性canvas（HTML 元素）、、context（xx 坐标）和y（y 坐标）。drawSquare()方法绘制正方形，在 keydown 事件和窗口加载时多次调用。

moveObject(event)处理方向键的 keydown 事件，并调用drawSquare().

我正进入（状态Uncaught TypeError: this.drawSquare is not a function at moveObject (myScript.js:37)

class Canvas {
  constructor(canvas, context) {
    this.canvas = canvas;
    this.context = context;
    this.x = 50;
    this.y = 50;
  }
  drawSquare() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.rect(this.x, this.y, 50, 50);

    // the outline
    context.lineWidth = 10;
    context.strokeStyle = "rgba(102, 102, 102, 1)";
    context.stroke();

    // the fill color
    context.fillStyle = "rgba(255, 204, 0, 1)";
    context.fill();
  }
  moveObject(event) {
    let keyCode = event.keyCode;
    switch (keyCode) {
      case 37:
        this.x -= 5;
        break;
      case 38:
        // code line for up
        break;
      case 39:
        // code line for right
        break;
      case 40:
        // code line for down
        break;
    }
    this.drawSquare();
  }
}
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var moving_obj = new Canvas(canvas, context);

moving_obj.drawSquare();

window.addEventListener("keydown", moving_obj.moveObject);
<canvas id="myCanvas" height="523" width="523"></canvas>
<script type="text/javascript" src="myScript.js"></script>

标签： javascriptooptypeerror

解决方案

我强烈建议您阅读整篇文章：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

问题在于关键字“this”

window.addEventListener("keydown", moving_obj.moveObject);

函数 moveObject 实际上使用事件 keydown 的“this”。因此，如果您查看带有断点的函数 moveObject 中的参数，您会发现它是 keydown 的事件处理程序。

您可以使用多种不同的解决方案来修复它，其中之一是： 在画布对象的构造函数中：

this.moveObject = this.moveObject.bind(this)

这确保将关键字“this”绑定为始终是类中的关键字，并且永远不会被覆盖。

你可以找到很多关于它的文章。另一种解决方案是：

window.addEventListener("keydown", ()=>{moving_obj.moveObject()});

推荐阅读