javascript - 在函数对象中单击事件后保留 this 的上下文

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 4 年前。

我有一个带有函数的对象。这是一个简化版本:

var app = {

  functOne: function(){
    document.querySelector('button').addEventListener('click', this.functTwo);
  },

  functTwo: function(){
    console.log('Funct Two has Run');
    this.functThree();
  },

  functThree: function(){
        console.log('Funct Three has Run');
  }
};

app.functOne();

functOne中的应用程序将单击处理程序附加到按钮(以启动 functTwo)。 FunctTwo应该执行FunctThree但“this”的上下文不再是“app”(现在是按钮)。如何从内部再次获取“app”(或传递给)functTwo (假设应用程序不仅仅像上面的示例那样附加到窗口)。

Answer 1

这是通过使用Function.prototype.bind()来实现的:

  functOne: function(){
    document.querySelector('button').addEventListener('click', this.functTwo.bind(this));
  },