在JavaScript事件回调中绑定"this"的正确方法？

我创建了一个名为SearchBox的类来处理搜索交互(延迟触发,搜索输入键按下,防止搜索活动时,搜索完成时同步结果,文本更改等).

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

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

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

这不起作用,因为当keypress事件调用searchKeyPressed处理程序时,它不会在上下文中这样做this.我能想到的唯一解决方案是只有现代浏览器支持的解决方案,即绑定回调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会提供一种自动执行此事件绑定的方法,但它似乎会this根据它的调用方式绑定到不同的事物.例如,在使用时on('eventname',instance.func),this是"currentTarget"(在冒泡术语中不一定是"目标"),而在使用时on('eventname','selector',instance.func),this是指与选择器匹配的元素.在任何一种情况下,func运行就好像它没有关系instance.

如果您向事件添加名称空间，则可以绑定事件并轻松地一次取消绑定所有事件。

绑定：

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

解除绑定：

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