javascript - addEventListener 在函数内部失败

Question

我在添加事件侦听器时遇到问题。我基本上将所有与键盘相关的功能封装到一个 JavaScript 类中，如下所示：

function Keyboard()
{
    this.key = new Array();

    for(x=0;x<255;x++)
    {
        this.key[x] = false;
    }

    function keyDown(evt)
    {
        this.key[evt.keyCode] = true;
        console.log("Keydown bioch");
    }

    function keyUp(evt)
    {
        this.key[evt.keyCode] = false;
    }

    window.addEventListener('keydown', this.keyDown, true);
    window.addEventListener('keyup', this.keyUp, true);
}

除了它根本不起作用。当我删除键盘功能并使所有内容成为全局（key[]、keyDown、keyUp 和 addEventListener 调用）时，一切正常。

我究竟做错了什么？

Answer 1

您在不合适的地方使用了this关键字。此外，您的对象没有keyDown/keyUp属性。

您将需要取消对数组的引用，因为this在侦听器中将指向事件接收 (dom) 元素 - 该元素没有key属性。要引用您的本地函数，只需使用它们的名称：

function Keyboard() {
    var arr = this.key = new Array();
    for(x=0;x<255;x++)
        arr[x] = false;

    function keyDown(evt) {
        arr[evt.keyCode] = true;
        console.log("Keydown bioch");
    }
    function keyUp(evt) {
        arr[evt.keyCode] = false;
    }

    window.addEventListener('keydown', keyDown, true);
    window.addEventListener('keyup', keyUp, true);
}

Answer 2

回调函数中的“this”引用引用的是窗口对象，而不是您可能期望的函数范围。

看到这个答案。

JavaScript 回调范围