Question

我正在尝试自己制作一个简单的游戏（暂时移动一个方块）。我的一个用于更新游戏环境的类函数中，有一个方法update()，该方法调用同一类displBackground()和displCharacters()的其他方法。当我在浏览器上看到控制台时，看到以下消息： TypeError：this.displBackground不是函数

我看穿了：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function
Not able to call method within another method of the same class JS
（还有一些其他问题，包括相当多的SO问题，我的时间已经用完了，因此我将在以后列出）我没有尝试直接声明对象而不是从类中声明对象，但是我将其保存为万不得已。

const gameContext = class {
constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval(this.update, 20);
};
addCharacter(char) {
    this.characters.push(char)
}
displBackground() {
    this.ctx.fillStyle = '#eeeeff';
    this.ctx.fillRect(0, 0, this.c.width, this.c.height);
}
displCharacters() {
    if (this.characters == 0) return
    for (var i = 0; i < this.characters.length; i++) {
        var character = this.characters[i];
        this.ctx.fillStyle = character.color;
        this.ctx.fillRect((character.pos[0]-character.size),
                          (character.pos[1]-character.size),
                          (character.pos[0]+character.size),
                          (character.pos[1]+character.size));
    }
}
update() {
    this.displBackground();
    this.displCharacters();
    console.log(KEYMAP); // This is a function that tells me what keys are currently pressed, and works well isolated.
}
}

我希望随着时间的流逝，画布每秒更新50次，然后确保该块可以移动（displBackground绘制背景，而dsplCharacters绘制字符在顶部）

Answer 1

将方法绑定到构造函数中，您就可以开始使用

。

constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval(this.update, 20);


    this.update = this.update.bind(this);
    this.displBackground = this.displBackground.bind(this);
    this.displCharacters = this.displCharacters.bind(this);
};

正在发生的事情

this.interval = setInterval(this.update, 20);

未将this绑定到this.update函数。

另一种解决方法是

constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval( ()=> this.update(), 20);

};

在用类构造方法构造的类的另一个方法内调用一个方法会返回类型错误（JavaScript）

1 个答案: