Question

嗨，我没有从KeyCodeClass中获取变量。这是我尝试的： TEST 1

class KeyCodeClass1 {
    constructor() {
        this.space;
    }
    KeyDown(e) {
        if (e.keyCode == 32) { this.space = true }
    }
    KeyUp(e) {
        if (e.keyCode == 32) { this.space = false }
    }
}

var KeyCode1 = new KeyCodeClass1();
window.addEventListener("keydown", KeyCode1.KeyDown, false);
window.addEventListener("keyup", KeyCode1.KeyUp, false);

setInterval(loop1,10);

function loop1() {
     console.log(KeyCode1.space);
}

现在我进入我的控制台未定义。因此，如果我按空格键等于e.keyCode == 32未定义的保留打印。那么，如果我们在函数中返回值，我们会得到这个： TEST 2

class KeyCodeClass2 {
    constructor() {
        this.space;
    }
    KeyDown(e) {
        if (e.keyCode == 32) { this.space = true }
    }
    KeyUp(e) {
        if (e.keyCode == 32) { this.space = false }
    }
    Space() {
        return this.space;
    }
}

var KeyCode2 = new KeyCodeClass2();
window.addEventListener("keydown", KeyCode2.KeyDown, false);
window.addEventListener("keyup", KeyCode2.KeyUp, false);

setInterval(loop2,10);

function loop2() {
     console.log(KeyCode2.Space());
}

所以在控制台中仍未定义。在我所做的3测试中，this.space在构造函数中定义了true或false：测试3

constructor() {
    this.space = false;
}

我们在控制台中获得了false。但是，当我按下空格键时，不是true。

所以我开始怀疑班级中的功能是否有效。这里证明它们工作正常： TEST 4

class KeyCodeClass4 {
    constructor() {
        this.space = false;
    }
    KeyDown(e) {
        if (e.keyCode == 32) {
            KeyCodeClass.space = true;
            console.log("space Down");
        }
    }
    KeyUp(e) {
        if (e.keyCode == 32) {
            KeyCodeClass.space = false;
            console.log("space Up");
        }
    }
}

var KeyCode4 = new KeyCodeClass4();
window.addEventListener("keydown", KeyCode4.KeyDown, false);
window.addEventListener("keyup", KeyCode4.KeyUp, false);

为什么我这样做？这是为了让我的代码更具可读性和可理解性。请帮我解决这个问题。

Answer 1

在我看来，您正在丢失this上下文，因此当您的侦听器被执行时，this并不指向您的类实例，而是指向window对象。我试着这样做：

var KeyCode = new KeyCodeClass2();
window.addEventListener("keydown", KeyCode.KeyDown.bind(KeyCode), false);
window.addEventListener("keyup", KeyCode.KeyUp.bind(KeyCode), false);

让我知道这是否适合您

如何从ES6中的类中获取变量？

1 个答案: