Обратный вызов метода объекта теряет свою привязку в обработчике события при передаче в качестве параметра, но не при жестком кодировании - PullRequest
Новая
       18

Обратный вызов метода объекта теряет свою привязку в обработчике события при передаче в качестве параметра, но не при жестком кодировании

2 голосов
/ 02 мая 2019

Я новичок в Javascript OOP и у меня есть вопрос о привязке к обратным вызовам в обработчиках событий.

Я пытаюсь применить обработчик событий к элементу DOM в моей функции конструктора.Функция обработчика событий - это метод объекта, и я пытаюсь передать функцию обратного вызова (также метод того же объекта) этому обработчику.

Когда я жестко программирую обратный вызов внутри обработчика(используя this.callbackMethod ()) он работает как ожидалось: 

class Foo {
  constructor (name){
    this.name = name
    this.bar();
  }
  callback(){
    console.log(this.name + 'bar callback this:') // 'foobar callback this:
    console.log(this) // Foo object with name 'foo'
  }
  bar(){
    document.querySelector('button').addEventListener('click', function(){
      console.log('bar click event this:')
      console.log(this)
      // this is the relevant line
      this.callback()
    }.bind(this));
  }
}

const foo = new Foo('foo');

Однако, когда я передаю этот параметр в качестве обратного вызова, даже если я использую .bind (this) как для обратного вызова, так и для обработчика,не удается: 

class Foo {
  constructor (name){
    this.name = name
    this.bar(this.callback);
  }
  callback(){
    console.log(this.name + 'bar callback this:')// Uncaught TypeError: Cannot read property 'name' of undefined
    console.log(this)
  }
  bar(cb){
    document.querySelector('button').addEventListener('click', function(){
      console.log(cb)// logs function definition
      // this is the relevant line
      cb().bind(this); 
    }.bind(this));
  }
}

const foo = new Foo('foo');

Примеры кодов:
Жесткий код обратного вызова: https://codepen.io/RandomNeuralFiring/pen/Pgrdey
Обратный вызов параметра: https://codepen.io/RandomNeuralFiring/pen/QPXVOR

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

PS Я не смог найти подходящий тег для привязки объекта - возможно, его нужно создать?

1 Ответ

1 голос
/ 02 мая 2019

Вы bind возвращаете возвращаемое значение из cb - попробуйте сначала связать функцию, а затем вызвать ее: 

cb.bind(this)();
...