引用 this 和函数的麻烦：未定义不是函数

Question

我正在制作游戏，但遇到了一些麻烦。 我创建了三个类：Player、Block 和 gameManager。 我在使用 mouse_listener 时遇到问题，因为每次我尝试调用循环、指令或信用时，它都会给我一个未捕获的错误，说未定义不是一个函数。 我该如何绕过它？

    function gameManager() {
                this.clear = function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }

                this.update = function () {
                    ctx.drawImage(game_background, 0, game_background.vy);
                    ctx.drawImage(game_background, 0, 800-Math.abs(game_background.vy));

                    if (Math.abs(game_background.vy) > 800) {
                        game_background.vy = 0;
                    }

                    ctx.font = "bold 20px Arial";
                    ctx.fillText("Score: " + score, 0, 20);
                    ctx.fillText("Highscore: "+ high_score, 420, 20);
                    for (var i=0; i<blocks.length; i++) {
                        player.update(blocks[i]);
                        blocks[i].update();
                    }
                }

                this.draw = function () {
                    player.draw();
                    for (var i=0; i<blocks.length; i++) {
                        blocks[i].draw();
                    }
                }

                this.loop = function () {
                    (function loop() {
                        this.clear();
                        this.update();
                        this.draw();
                        setTimeout(loop, 60)})();
                    }

                this.setup = function () {
                    this.clear();
                    ctx.drawImage(menu_background, 0, 0);
                    ctx.drawImage(play_button, 150, 170);
                    ctx.drawImage(instruction_button, 150, 290);
                    ctx.drawImage(credit_button, 150, 410);
                }

                this.instruction = function () {
                    this.clear();
                    //ctx.drawImage(instruction_background, 0, 0);
                }

                this.gameover = function () {
                    this.clear();
                    ctx.drawImage(gameover_retry, 0, 0);
                }

                this.mouse_listener = function (e) {
                    console.log("x: " + e.clientX);
                    console.log("y: " + e.clientY);
                    if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 180 && e.clientY <= 220) {
                        this.loop();
                    } else if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 300 && e.clientY <= 340) {
                        this.instruction();
                    } else if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 410 && e.clientY <= 460) {
                        this.credit();
                    }
                }

                this.keyboard_listener = function (e) {
                    console.log(e.keyCode);
                    switch (e.keyCode) {
                    case 39:
                        player.x += player.vx;
                        break;
                    case 37:
                        player.x -= player.vx;
                        break;
                    case 82:
                        location.reload();
                    }
                }
                return this;
            }
gm = new gameManager();
    document.addEventListener("mousedown", gm.mouse_listener, false);

Answer 1

试试

document.addEventListener("mousedown", gm.mouse_listener.bind(gm), false);