3

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

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

4

5 回答 5

5

该对象可以作为 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();

小提琴

这使事件处理程序的范围保持不变。

于 2013-09-03T19:39:19.417 回答
1

你可以使用bind()：

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

但是对于 IE，这仅适用于 IE >= 9。

编辑：在旧版 IE 中，您可以使用 @Kevin B 在评论中建议的 jQuery's $.proxy()：

bindEvents: function() {
  $('button').on('click', $.proxy(function() {
    this.handleClick();
  }, this)); 
}
于 2013-09-03T19:37:27.320 回答
0

指定的技术称为闭包，它是常用的。但是，有时重要的是要注意不要导致内存泄漏。您可以在此处阅读有关关闭的更多信息：

JavaScript 闭包是如何工作的？

以及与闭包相关的内存泄漏，这里：

JavaScript 闭包中的内存泄漏风险

于 2013-09-03T19:46:48.420 回答
0

正如@kamituel 所说，bind可以使用：

Widget.prototype = {
  bindEvents: function() {
    $('button').on('click', this.handleClick.bind(this));
  },
  handleClick: function() {
    console.log(this.property);
  }
}
于 2013-09-03T19:39:40.533 回答
0

最好的保存方法this是lambda 函数：

$('button').on('click', () => this.handleClick());

或者如果您想保留对事件的引用：

$('button').on('click', (event) => this.handleClick(event));

lambda 函数的特殊之处在于您不在（可能不同的）上下文中定义另一个函数。lambda 术语只是一个指令，因此是它定义的对象的一部分 - 在您的情况下是由window.Widget = new Widget().

于 2018-09-05T08:01:57.683 回答