Блог

Главная - Вопросы по программированию - Привязка метода класса Javascript не работает

Привязка метода класса Javascript не работает

#javascript

#javascript

Вопрос:

У меня есть этот класс:

 class test{
    constructor(){
        document.addEventListener('click', handle);
        this.handle = this.handle.bind(this);
    }

    handle(){
        console.log(this); //returns document element
    }
}

new test()

Я привязываюсь this к событию handle, но оно все равно возвращает элемент document .
Я пытался использовать функции со стрелками, и это работает, но я хочу знать, могу ли я сделать это без использования функций со стрелками…

Ответ №1:

Назначьте перед привязкой.

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

 class test {
  constructor() {
    this.eleFromEstack = "Test"; //  Just a test!
    this.handle = this.handle.bind(this);
    document.addEventListener('click', this.handle);
  }

  handle() {
    console.log(this);
  }
}

new test(); 
 <h1>Click!!</h1>

Ответ №2:

Привязывайте this значение при передаче handler функции в addEventListener обратный вызов.

 class Test{
    field = "hello"
    handle(){
        console.log(this); //returns document element
    }
    constructor(){
        document.querySelector("#container").addEventListener('click', this.handle.bind(this));
       
    }
   
}
let test = new Test(); 
 <div id="container">test</div>

Ответ №3:

Неважно, мой локальный сервер кэшировал файл JS с обновленным кодом

Комментарии:

1. Тогда вам, вероятно, следует удалить вопрос

2. Я думал оставить это, потому что, возможно, кто-то совершит ту же глупую ошибку, но, возможно, она слишком широкая и не стоит ее оставлять

3. Если здесь есть реальный вопрос, то его можно оставить, но я не совсем понимаю, что вы пытались сделать. Возможно, если вы сможете уточнить это таким образом, чтобы не ссылаться на вашу ошибку в цепочке инструментов? Я удалю свой downvote, если вы сможете это сделать. По крайней мере, это не ответ.

4. Когда запускался метод handle(), элемент document передавался методу с помощью ключевого слова «this», и я хотел, чтобы «this» вместо этого ссылался на класс.

Метки: