使用事件监听器时保持“this”的值答案

【问题标题】：Maintaining the value of 'this' when using event listener使用事件监听器时保持“this”的值
【发布时间】：2023-04-04 15:25:01
【问题描述】：

我有以下功能：

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

我想这样绑定：

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

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

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

这行得通，但有件事告诉我有一种更清洁的方法可以解决这个问题。 .call() 或 .apply() 会以某种方式......在这里申请吗？我仍然不确定这些功能是如何工作的。

另外，我不一定需要将自己限制在jQuery.on()。如果有一种“香草”的方式来做到这一点，请成为我的客人来教我。

【问题讨论】：

你的意思是喜欢？ $(document).on('keyup', function(e) { onDocumentKeyUp.call(self, e); });
可以，但我感觉不太干净。我想知道是否有一种干净、惯用的方式来通过事件处理程序传递 this 的值。

【解决方案1】：

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

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

由于此方法仅受 ES5.1 兼容的浏览器支持，您可以使用 jQuery.proxy 而不是 polyfill。

【讨论】：

【解决方案2】：

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

这里是 jsFiddle：jsFiddle

【讨论】：