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

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

类Canvas具有Canvas HTML元素、上下文、x坐标和y坐标的属性。drawSquare方法绘制square，它在按下键事件和加载窗口时被多次调用

moveObjectevent处理箭头键的向下键事件，并调用drawSquare

我得到了未捕获的TypeError:this.drawSquare不是moveObject myScript.js:37中的函数

类画布{ 构造器，上下文{ this.canvas=画布； this.context=上下文； 这个x=50； 这个y=50； } 拖板{ context.clearRect0，0，canvas.width，canvas.height； context.recthis.x，this.y，50,50； //大纲 context.lineWidth=10； context.strokeStyle=rgba102、102、102、1； 中风； //填充颜色 context.fillStyle=rgba255，204，0，1； context.fill； } moveObjectevent{ 设keyCode=event.keyCode； 开关键码{ 案例37： 这个.x-=5； 打破 案例38： //上行代码行 打破 案例39： //右边的代码行 打破 案例40： //下行代码行 打破 } 这是drawSquare； } } var canvas=document.getElementByIdmyCanvas； var context=canvas.getContext2d； var moving_obj=新画布，上下文； 正在移动_obj.drawSquare； window.addEventListenerkeydown，移动_obj.moveObject；

---

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

问题在于关键字this

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

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

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

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

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

你可以找到很多关于它的文章。 另一个解决办法是：

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

---

您需要将当前对象作为上下文传递给moveObject函数

window.addEventListenerkeydown，移动_obj.moveObject.bindthis；