JS 原型无法设置未定义的属性 'moveRight'

Question

我对这个简单的原型制作有疑问：

Game = function (moduleConfig, gameConfig) {
    this.moduleConfig = moduleConfig;
    this.gameConfig = gameConfig;

    // Game-Commands
    this.keyCommands = {
        moveLeft: false,
        moveRight: false
    };

    this.catcher = null;
    this.stage = null;
    return this;
}

/**
 * Left arrow down
 */
Game.prototype.onKeyboardLeftDown = function () {
    this.keyCommands.moveLeft = true;
}

/**
 * Left arrow up
 */
Game.prototype.onKeyboardLeftUp = function () {
    this.keyCommands.moveLeft = false;
}

调用 onKeyboardLeftDown 和 onKeyboardLeftUp 时，我总是收到错误消息：Uncaught TypeError: Cannot set property 'moveRight' of undefined。但是我已经在 keyCommands 对象的构造函数中声明了 moveLeft。

在按键按下和按键弹起事件上调用了这两个方法：

Game.prototype.init = function () {

    // ...

    // =========================================================================
    // Set keyboard
    KeyboardJS.on('left', this.onKeyboardLeftDown, this.onKeyboardLeftUp);
    KeyboardJS.on('right', this.onKeyboardRightDown, this.onKeyboardRightUp);
    // =========================================================================
};

我的 index.html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <title>pixi.js example 1</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="js/pixi.dev.js"></script>
    <script src="js/keyboard.js"></script>
    <script src="js/moduleConfig.js"></script>
    <script src="js/moduleResult.js"></script>
    <script src="js/game.js"></script>
</head>
<body style="background-color: #EEEEEE">
    <script>

        var game = new Game(moduleConfig, {
            screenWidth: (window.innerWidth - 10),
            screenHeight: (window.innerHeight - 10),
            bgColor: 0xEEEEEE
        });

        game.init();
    </script>

</body>
</html>

有人看到失败了吗？我搜索了很多，但我很困惑（通常我只在 c# 中开发...）

Answer 1

你的问题不完整，我没有看到你试图定义moveRight的相关代码。

可能出现的问题：

您可能有错字，keyCommands 拼写正确
您可能会在其范围之外引用 keyCommands
在 keyCommands 初始化之前，您可以参考 keyCommands.moveRight
您可以在引用 moveRight

keyCommands

Answer 2

你绑定的是错误的。

// Set keyboard
KeyboardJS.on('left', this.onKeyboardLeftDown, this.onKeyboardLeftUp);

this.onKeyboardLeftDown 和 this.onKeyboardLeftUp 在没有正确上下文的情况下被调用

要解决此问题，请执行以下操作：

KeyboardJS.on('left', this.onKeyboardLeftDown.bind(Game), this.onKeyboardLeftUp.bind(Game));

我不建议使用 bind() - 为了浏览器兼容性，但您可以使用类似 lodash 的绑定或绑定 "emulator" 之类的东西：

function bind(fn, ctx) {
    return function bound() {
        return fn.apply(ctx, arguments);
    };
}

另一种方法是

var self = this;
KeyboardJS.on('left', 
    function(){self.onKeyboardLeftDown()}, 
    function(){self.onKeyboardLeftUp()}
);

JS 原型无法设置未定义的属性 'moveRight'

JS prototyping Cannot set property 'moveRight' of undefined

javascript

prototype

properties

class

undefined

JS 原型无法设置未定义的 属性 'moveRight'

JS prototyping Cannot set property 'moveRight' of undefined

javascript

prototype

properties

class

undefined

JS 原型无法设置未定义的属性 'moveRight'