我有一个类,其中我想在事件发生时运行一个函数。每当函数调用时,类实例的函数不运行。
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()
中运行另一个实例函数,但它说该函数未定义。
感谢任何帮助。
最佳答案
当您向 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">
关于javascript - 如何将事件监听器添加到实例方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55349982/