子类变量未定义-js

Question

我正在编写游戏，并且在变量和继承方面遇到麻烦，每当我尝试在继承的类中访问它们时，它们就会显示为undefined。我尝试使用super来解决此问题，但那没有用，这可能是因为我对JavaScript相对陌生。

变量在基类中起作用，但在子类中不起作用。This is the inherited class这是Base Class。

只是为了澄清这个问题，我在问为什么变量在子类中而不是在基类中出现为未定义，以及如何解决此问题。谢谢！

代码在图片中更清晰。

class charachter {

    constructor(xPos, yPos) {
        this.rightVelocity = 0;
        this.leftVelocity = 0;
        this.upVelocity = 0;
        this.downVelocity = 0;
        this.xyCordsRaw = [xPos, yPos];
        this.xyCordsBlock = [Math.round(this.xyCordsRaw[0] / 50),
            Math.round(this.xyCordsRaw[1] / 100)
        ]
    }

    updateCharachter() {
        ctx.drawImage(charachterRight, this.xyCordsRaw[0],
            this.xyCordsRaw[1])
    }

    findTileStandingOnType() {
        return
        solidObjects.includes(biome[this.xyCordsBlock[1] + 1][this.xyCordsBlock[0]])
    }

    isOnTheGround() {
        return this.findTileStandingOnType() == true &&
            this.xyCordsRaw[1] == (this.xyCordsBlock[1] * 100) + 25
    }

    isTileAbove() {
        return solidObjects.includes(biome[this.xyCordsBlock[1] - 1]
            [this.xyCordsBlock[0]])
    }

    isTouchingTileAbove() {
        return this.isTileAbove() == true && this.xyCordsBlock[1] * 100 == this.xyCordsRaw[1]
    }

    isWallLeft() {
        return solidObjects.includes(biome[this.xyCordsBlock[1]][this.xyCordsBlock[0] - 1])
    }

    isWallRight() {
        return solidObjects.includes(biome[this.xyCordsBlock[1]][this.xyCordsBlock[0] + 1])
    }

    isTouchingWallRight() {
        return this.isWallRight() == true && this.xyCordsBlock[0] * 50 == this.xyCordsRaw[0]
    }

    isTouchingWallLeft() {
        return this.isWallLeft() == true && this.xyCordsBlock[0] * 50 == this.xyCordsRaw[0]
    }
}

class playerChar extends charachter {

    constructor(xPos, yPos, leftVelocity, rightVelocity, upVelocity, downVelocity, xyCordsRaw, xyCordsBlock) {
        super(xPos, yPos, leftVelocity, rightVelocity, upVelocity, downVelocity, xyCordsRaw, xyCordsBlock);
        document.addEventListener('keydown', this.takeInput);
    }

    takeInput(e) {
        if (e.code == 'KeyA') {
            console.log(this.leftVelocity);
        }
        if (e.code == 'KeyW') {
            console.log("The letter W was pressed");
        }
        if (e.code == 'KeyD') {
            console.log(this.xyCordsRaw);
        }
    }
}

var player = new playerChar(150, 325);

Answer 1

存在的直接问题是在事件侦听器中使用this。

document.addEventListener('keydown', this.takeInput);

调用takeInput时传递对addEventListener函数对象的引用，并且由于它是document的事件处理程序，因此调用时takeInput的this值为document。尝试

document.addEventListener('keydown', this.takeInput.bind(this));

首先要看看有什么区别。

---

下一个要纠正的错误是在return中的换行后，>

findTileStandingOnType(){
return 
solidObjects.includes(biome[this.xyCordsBlock[1]
应该是

findTileStandingOnType(){
return solidObjects.includes(biome[this.xyCordsBlock[1] + 1][this.xyCordsBlock[0]])}
不带分号分隔符的返回语句仅在下一行继续，如果不这样做将导致语法错误。那不是案例在这里。