Question

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

Codepen示例：
硬编码的回调：https://codepen.io/RandomNeuralFiring/pen/Pgrdey
参数回调：https://codepen.io/RandomNeuralFiring/pen/QPXVOR

我希望可以将bar（）与其他回调一起使用，因此很想了解如何动态设置其上下文。

P.S。我找不到适合对象绑定的标签-也许应该创建一个标签？

Answer 1

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

cb.bind(this)();

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

1 个答案: