Uncaught TypeError不是函数类方法

Question

我是JavaScript的新手，我收到了这个错误：

Uncaught TypeError: this.move is not a function

如果我的问题主要是代码，SO不会让我发帖，所以这里有一个github中文件的链接：https://github.com/pianocomposer321/Dodger.js/blob/master/player.js

当onKeyPressed函数尝试调用this.move()时，错误发生在第一个case语句处。

class Player {
constructor(width, height, cvs) {
this.width = width;
this.height = height;
this.cvs = cvs;
this.ctx = this.cvs.getContext("2d");
this.x = this.cvs.width / 2;
this.y = this.cvs.height - this.height;
document.addEventListener("keydown", this.onKeyPressed);
}
draw() {
this.ctx.fillRect(this.x, this.y, this.width, this.height);
}
move(x, y) {
this.x += x;
this.y += y;
}
onKeyPressed() {
switch (window.event.keyCode) {
case 37:
this.move(-5, 0);
break;
case 38:
this.move(0, 5);
break;
case 39:
this.move(5, 0);
break;
case 40:
this.move(0, -5);
break;
}
}
}
export { Player };

提前感谢！

Answer 1

addevent监听器正在改变这一点。您需要使用绑定。

class Player {
constructor(width, height, cvs) {
this.x = 0;
this.y = 0;
document.addEventListener("keydown", this.onKeyPressed.bind(this));
}
move(x, y) {
this.x += x;
this.y += y;
console.log(this.x, this.y);
}
onKeyPressed() {
switch (window.event.keyCode) {
case 37:
this.move(-5, 0);
break;
case 38:
this.move(0, 5);
break;
case 39:
this.move(5, 0);
break;
case 40:
this.move(0, -5);
break;
}
}
}
new Player()