当作为参数传递时，对象方法回调在事件处理程序中失去其绑定，但在硬编码时不会

Question

I'm new to Javascript OOP and have a question about binding to callbacks in event handlers.

I'm trying to apply an event handler to a DOM element in my constructor function. The event-handler function is a method of the object, and I'm attempting to pass a callback function (also a method of the same object) to that handler.

When I hard code the callback inside the handler (using this.callbackMethod()) it runs as expected:

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');

However, when I pass that parameter as a callback, even if I use .bind(this) on both the callback and the handler, it fails:

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');

Codepen examples:
Hard-coded callback: https://codepen.io/RandomNeuralFiring/pen/Pgrdey
Parameter callback: https://codepen.io/RandomNeuralFiring/pen/QPXVOR

I want the option of re-using bar() with other callbacks, so would love to understand how I can set its context dynamically.

PS I couldn't find a suitable tag for object-binding - perhaps one should be created?

Answer 1

您正在bind cb的返回值- 尝试先绑定函数然后调用它：

cb.bind(this)();