javascript - 如何将事件监听器添加到实例方法

Question

我有一个类，其中我想在事件发生时运行一个函数。每当函数调用时，类实例的函数不运行。

class Player {
    constructor() {
        window.addEventListener('keypress', this.key_press);
        this.keys_pressed = 0;
    }

    key_press(key_press) {
        if(key_press.key == "w") {
            console.log(key_press);
            this.keys_pressed += 1;
        }
        console.log(this.keys_pressed);
    }
}

每当调用 this.key_press 时，它都会输出 NaN。似乎类的方法没有被运行，而是一个副本(？)。我还尝试在 key_press() 中运行另一个实例函数，但它说该函数未定义。

感谢任何帮助。

Answer 1

当您向 window 或 DOM 的任何元素添加事件监听器时，this 值指向该元素而不是 Player实例。

所以你得到 NaN 因为 window 没有 keys_pressed 属性和 keys_pressed += 1被视为 keys_pressed = undefined + 1，即 NaN。

要解决这个问题，我们需要显式绑定(bind)到Player实例:

const input = document.querySelector("#input");
class Player {
    constructor() {
        input.addEventListener('keypress', this.key_press.bind(this));
        this.keys_pressed = 0;
    }

    key_press(key_press) {
        if(key_press.key == "w") {
            this.keys_pressed += 1;
        }
        console.log(this.keys_pressed);
    }
}
let p = new Player();

Type here: <input type="text" id="input">

我们还可以使用 arrow ( => ) 函数从当前上下文中捕获 this 并指向当前实例Player 对象的:

const input = document.querySelector("#input");
class Player {
    constructor() {
        input.addEventListener('keypress', (event) => this.key_press(event));
        this.keys_pressed = 0;
    }

    key_press(key_press) {
        if(key_press.key == "w") {
            this.keys_pressed += 1;
        }
        console.log(this.keys_pressed);
    }
}
let p = new Player();

Type here: <input type="text" id="input">