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

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

这question问同样的事情，(未接受的)答案是将回调传递给 $.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();

FIDDLE

这使事件处理程序的范围保持原样。