javascript - jQuery 在事件处理程序中操作 'this' 关键字实际上有充分的理由吗？

Question

考虑到以下常见场景:

console.log(this); // window or any parent object

$('.selector').on('click', function(event) {
    console.log(this); // clicked DOM element
});

var myFunc = function() {
    console.log(this); // window or parent object
}

自 1.3 版本起，jQuery 添加了 event.currentTarget当绑定(bind)计数 event.currentTarget === this 的事件处理程序时，那么实际上有一个很好的理由来操作 this 并切换上下文吗？这种行为通常不会违反“不要更改关键字值”的潜规则(例如 undefined = 'not Define')吗？

当我们需要将原始 this 缓存在像 self 这样的变量中或使用类似 jQuery.proxy 的帮助者将上下文重新分配给事件处理程序。

我的问题:这只是早期 jQuery 实现的遗留物还是有我看不到的实际好处(除了可能比访问 event.currentTarget 稍微更方便的方法来获取元素...)？

Answer 1

假设您有一个带有一些方法的对象:

var object = {
  click: function() {
    alert(this.property);
  },

  property: "Hello World"
}

您可以调用object.click()，并且如您所料，您将在警报中收到“Hello World”。

您希望能够使用“click”函数作为事件处理程序:

$("button").on("click", object.click);

但是您发现这不起作用，因为 jQuery 调用“click”函数，并将 this 设置为所单击按钮的 DOM 节点。这很令人恼火。由于 JavaScript 函数调用的语义，这也是不可避免的。

当您通过属性引用调用“click”函数时，语言会安排 this 来引用该对象。这就是 object.click() 起作用的原因。但是，当您获取对函数的引用并将其跨函数边界传递时(如对 .on() 的调用)，该关系就会丢失。 jQuery 方法得到的只是一个简单的、未经修饰的函数，与其定义中涉及的原始对象完全没有内在关系。

因此，jQuery 实际上只有两个选择。首先，它可以通过将 this 安排为 undefined 来明确函数未连接的事实。但这并不是很有用。另一种选择是为 this 选择一些有趣的内容，这就是库的作用。请注意， native DOM 0 级事件调度机制执行相同的操作。