如何从 ES6 中的类中获取变量？ [复制]答案

【问题标题】：How do I get a variable out of a class in ES6? [duplicate]如何从 ES6 中的类中获取变量？ [复制]
【发布时间】：2017-06-29 20:38:29
【问题描述】：

您好，我没有从 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，未定义的停留将被打印出来。那么，如果我们在函数中返回值，我们会得到以下结果：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。

于是我开始怀疑类中的功能是否正常工作。这里证明它们工作正常：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);

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

【问题讨论】：

（与主要问题无关。）请注意，构造函数中的this.space; 是无操作的。它在this 上查找space 的值，然后丢弃该值。它不会“声明”space 作为实例属性或任何类似的东西。
@T.J.Crowder 感谢反馈我仍然是一名学生，我的老师并不擅长 JavaScript，并且正在寻找错误的解决方案。（关于副本）。我在这个问题上卡住了大约 4 周

标签： javascript ecmascript-6 es6-class

【解决方案1】：

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

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

让我知道这是否适合你

【讨论】：