如何从事件处理程序引用对象实例

Question

在下面的代码中，有没有handleClick()比从全局实例中引用对象实例更好的方法呢？

var Widget = function() {
  this.property = 'value';
  this.bindEvents();
}

Widget.prototype = {

  bindEvents: function() {
    $('button').on('click', this.handleClick);
  },

  handleClick: function() {
    var self = window.Widget;

    console.log(self.property);
  }
}

window.Widget = new Widget();

这个问题问的是同一件事，（不可接受的）答案是将回调传递给$.on()并从那里调用处理程序，将实例作为参数传递如下：

bindEvents: function() {
  var self = this;

  $('button').on('click', function() {
    self.handleClick.apply(self);
  });
}

这种传递实例的技术真的是正确的方法吗？或者，除了我已经展示的两种方法之外，还有没有其他首选的方法？

Answer 1

该对象可以作为eventData传递给on()，如下所示：

var Widget = function () {
    this.property = 'value';
    this.bindEvents();
}

Widget.prototype = {

    bindEvents: function () {
        $('button').on('click', {o: this}, this.handleClick);
    },

    handleClick: function (e) {
        var widgt = e.data.o;
        console.log(widgt.property);
    }
}

window.Widget = new Widget();

小提琴

这样可以使事件处理程序的范围保持应有的状态。