为什么这两个对 addEventListener 的 javascript 调用有不同的结果

Question

你能帮我理解为什么这两个 JavaScript 函数在执行console.log(self)时会有不同的结果吗？

第一段代码：

var test = {
  init: function() {
    var self = this;
    document.getElementById('show-button').addEventListener('click', self.showButton, false);
  },

  showButton: function() {
    var self = this;
    console.log(self);
  }
}
test.init();

单击按钮显示时将在控制台上产生以下结果：

<button type="submit" class="btn btn-default" id="show-button" title="Show the list">Show</button>

而第二个代码：

var test = {
  init: function() {
    var self = this;
    
    function show() {
      self.showButton();
    }
    
    document.getElementById('show-button').addEventListener('click', show, false);
  },

  showButton: function() {
    var self = this;
    console.log(self);
  }
}
test.init();

单击按钮显示时将在控制台上产生以下结果：

Object {init: function, showButton: function}

Answer 1

在您的第一个示例中，您将self.showButton引用传递给addEventListener 。 然后它将在应用到的元素的上下文中执行，在本例中为按钮，因此this将引用该按钮。

在第二个示例中，由于show方法，您制作了一个闭包来捕获您的对象实例。 因此show应用于按钮，然后show在您的对象实例上调用showButton 。

为避免这种情况，您可以使用执行此确切工作的绑定函数：

 var test = { init: function() { var self = this; document.getElementById('show-button').addEventListener('click', self.showButton.bind(self), false); }, showButton: function() { var self = this; console.log(self); } } test.init();

 <button id="show-button">Show</button>

Answer 2

不同之处在于您将函数传递给事件侦听器的方式

1) document.getElementById('show-button').addEventListener('click', show, false);

Show 只是一个函数（this = undefined），this 将绑定到元素。

2) document.getElementById('show-button').addEventListener('click', self.showButton, false);

self.showButton 是一个属性（类型函数），它已经绑定到 self（测试对象）

更多信息