javascript - 使用 jQuery.on 时保持上下文

Question

我正在使用 jQuery 和 lodash 来构建一个界面，并且我正在使用这样的委托事件：

function Interface() {
  this.connectEvents();
  _.bindAll(this);
};
_.extend(Interface.prototype, {
  connectEvents : function() {
    this.$clockNav.on('click', '.navprev a', this.previousTime);
  },
  previousTime : function() {
    this.getPreviousTime(this.currentTime);
  }
});

然而，即使我曾经_.bindAll绑定previousTime到我正在控制的 Interface 对象的实例，jQuery 也会覆盖该绑定，而是设置this为我单击的元素。如何阻止 jQuery 执行此操作并保留 的正确值this？

Answer 1

您可以使用$.proxy()将自定义上下文传递给事件处理程序回调

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', $.proxy(this.previousTime, this));
};

Answer 2

使用jQuery.proxy或Function.prototype.bind原生方法。

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', $.proxy(this.previousTime, this));
};

或者

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', this.previousTime.bind(this));
};

Answer 3

事实证明，这个问题比我想象的要简单得多：在我的初始化函数中，我connectEvents之前调用了_.bindAll. 哦。

Answer 4

有多种方法可以做到这一点。另一种尚未提及的技术是在闭包中使用局部变量：

_.extend(Interface.prototype, {
  connectEvents : function() {
    var self = this;
    this.$clockNav.on('click', '.navprev a', function() {self.previousTime()});
  },
  previousTime : function() {
    var self = this;
    this.getPreviousTime(function() {self.currentTime()});
  }
});