使用事件侦听器时维护'this'的值

Question

我有以下功能：

onDocumentKeyUp: function (e) {
    if (e.keyCode === 27) {
       this.deactivate();
    }
}

我想像这样绑定它：

$(document).on('keyup', onDocumentKeyUp);

但是，当我这样做时，this函数中的onDocumentKeyUp引用该文档。我通过这样做解决了这个问题：

var self = this;
$(document).on('keyup', function(e) { self.onDocumentKeyUp(e); });

这很有效，但有些东西告诉我，有一个更清洁的方法来解决这个问题。 .call()或.apply()以某种方式适用于此处？我仍然不确定这些功能是如何正常工作的。

另外，我不一定要将自己限制在jQuery.on()。如果有一种'香草'的方式，请做我的客人教我。

Answer 1

您可以使用.bind()设置上下文（无需立即调用call或apply）：

$(document).on('keyup', this.onDocumentKeyUp.bind(this));

由于此方法仅受符合ES5.1标准的浏览器支持，因此您可以使用jQuery.proxy代替对其进行填充。

Answer 2

请注意data方法的on参数：http://api.jquery.com/on/ 您还可以使用jQuery.proxy方法：http://api.jquery.com/jQuery.proxy/

这是jsFiddle：jsFiddle