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

Question

您好，我没有从 KeyCodeClass 中获取变量。这是我尝试过的： 测试 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 的未定义停留就会打印出来。那么如果我们 return 一个函数中的值，我们会得到这个：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());
}

所以在控制台中仍然是未定义的。我在构造函数中用 true 或 false 定义了 this.space 的第 3 个测试：TEST 3

constructor() {
    this.space = false;
}

我们在控制台中得到 false。但是当我按下空格键时，不会转到 true.

所以我开始怀疑class中的功能是否有效。这里证明它们工作正常：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 没有指向你的 class 实例，而是 window 目的。我会尝试做：

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

让我知道这是否适合你

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

How do I get a variable out of a class in ES6?

javascript

ecmascript-6

es6-class