Question

你能帮助我理解为什么这两个JavaScript函数在执行func highlightTrack(sender:UIButton) { if sender.isSelected { return } btn1.isSelected = false btn2.isSelected = false sender.isSelected = true }时会有不同的结果吗？

第一个代码：

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

Answer 1

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

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

为避免这种情况，您可以使用完成这项工作的bind函数：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

1）document.getElementById（＆＃39; show-button＆＃39;）。addEventListener（＆＃39; click＆＃39;，show，false）;

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

2）document.getElementById（＆＃39; show-button＆＃39;）。addEventListener（＆＃39; click＆＃39;，self.showButton，false）;

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

more info

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

2 个答案: