javascript - 在 JavaScript 事件回调中绑定(bind) "this"的正确方法？

Question

我创建了一个名为 SearchBox 的类来处理搜索交互(延迟触发、按回车键搜索、在搜索处于事件状态时阻止搜索、在搜索完成和文本更改时同步结果等)。

所有类方法都是原型(prototype)方法，意味着可以通过this 访问。在下面的代码中，假设 p 是类的原型(prototype)。

p.registerListeners = function () {
    $(this.element).on('keypress', this.searchKeyPressed);
};

p.unregisterListeners = function () {
    $(this.element).off('keypress', this.searchKeyPressed);
};

这不起作用，因为当按键事件调用 searchKeyPressed 处理程序时，它不会在 this 的上下文中执行此操作。我能想出的唯一解决方案是只有现代浏览器支持的解决方案，即将回调绑定(bind)到 this，这实际上创建了一个新函数。因为它创建了一个新函数，所以我必须缓存它以便稍后将其删除，因为我必须将相同的引用传递给 off 和我传递给 on 的引用。

有没有比这更好的方法，或者这样可以吗？

var boundKeyPressed;

p.registerListeners = function () {
    boundKeyPressed = this.searchKeyPressed.bind(this);
    $(this.element).on('keypress', boundKeyPressed);
};

p.unregisterListeners = function () {
    $(this.element).off('keypress', boundKeyPressed);
};

我认为 jQuery.on 可能会提供一种自动执行此事件绑定(bind)的方法，但它似乎将 this 绑定(bind)到不同的事物，具体取决于它的方式叫。例如，当使用 on('eventname',instance.func) 时，this 是“currentTarget”(不一定是冒泡术语中的“target”)，而当使用on('eventname','selector',instance.func)，this指向匹配选择器的元素。在任何一种情况下，func 都会运行，就好像它与 instance 没有任何关系一样。

Answer 1

如果您将命名空间添加到您的事件中，您可以绑定(bind)事件并轻松地一次性解除绑定(bind)。

绑定(bind):

$(this.element).on('keypress.mynamespace', this.searchKeyPressed.bind(this));

解除绑定(bind):

$(this.element).off('.mynamespace');