Javascript keydown 操作对象

Question

我正在尝试创建一个对象来处理用户的键盘输入。

var control = new Control ();

function Control () {
    this.w = 0;
    this.a = 0;
    this.s = 0;
    this.d = 0;
    document.addEventListener("keydown", this.KeyDown);
    document.addEventListener("keyup", this.KeyUp);
}
Control.prototype.KeyDown = function (event, control) {
    switch (event.keyCode) {
        case 87:
            this.w = 1;
            break;
        case 65:
            this.a = 1;
            break;
        case 83:
            this.s = 1;
            break;
        case 68:
            this.d = 1;
            break;
    }
    console.log("w: " + this.w + "\na: " + this.a + "\ns: " + this.s + "\nd: " + this.d);
}
Control.prototype.KeyUp = function (event) {
    switch (event.keyCode) {
        case 87:
            this.w = 0
            break;
        case 65:
            this.a = 0;
            break;
        case 83:
            this.s = 0;
            break;
        case 68:
            this.d = 0;
            break;
    }
    console.log("w: " + this.w + "\na: " + this.a + "\ns: " + this.s + "\nd: " + this.d);
}

问题是，每当我在 "keyDown" 和 "keyUp" 函数中写入 "this" 时，"this" 指的是文档，而不是 "control" 目的。如何从函数中访问 "control" 对象？

Answer 1

将 var control = new Control (); 移动到脚本的末尾。 prototype 中的函数尚未定义，您现在正尝试使用它们。

然后，您可以将函数绑定到您想要的上下文。

document.addEventListener("keydown", this.KeyDown.bind(this));
document.addEventListener("keyup", this.KeyUp.bind(this));

参见this fiddle。

还有其他选项，但在您的情况下，bind 会更容易。有关更多信息，请查看 this question.

上的答案

Answer 2

this.KeyDown,this.KeyUp 将是 undefined 在 Control 构造函数中，你需要在最后移动 var control = new Control ();。
您可以使用以下代码绑定 control 上下文。

document.addEventListener("keydown", this.KeyDown.bind(this)); document.addEventListener("keyup", this.KeyUp.bind(this));

注意：IE8 不支持绑定，替代方法是 here

Javascript keydown 操作对象

Javascript keydown manipulating object

javascript

keyboard

scope

event-listener