Как добавить Eventlistener в метод экземпляра - PullRequest
Новая
       23

Как добавить Eventlistener в метод экземпляра

3 голосов
/ 26 марта 2019

У меня есть класс, в котором я хочу запускать функцию всякий раз, когда происходит событие. Всякий раз, когда вызывается функция, функция экземпляра класса не запускается. 

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(), но он говорит, что функция не определена.

Любая помощь приветствуется.

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

Когда вы добавляете прослушиватель событий в 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">
0 голосов
/ 26 марта 2019

Вот еще один обходной путь с onkeypress и bind. 

class Player {
    constructor(input) {
        input.onkeypress = this.onkeyPress.bind(this); 
        this.keys_pressed = 0;
    }
    onkeyPress(event) {
      event.key=="w"? this.keys_pressed++:this.keys_pressed;
      console.log(this.keys_pressed);
    };
}

const input = document.querySelector("#input");
let p = new Player(input);
Type here: <input type="text" id="input">
...