jquery - 在 jQuery 中使用 'this' 关键字的上下文

Question

作为 jQuery 新手，我对使用 this 关键字的不同上下文感到有些困惑。有时它指的是 DOM 元素，例如this.id 有时它指的是 jQuery 对象，例如$(this).val().

Remy Sharp's blog post很有帮助，但我想知道您如何向新手解释其中的差异。这种差异是严格意义上的 jQuery 问题还是所有 Javascript 共有的问题？

感谢迄今为止所有的回复 - 很棒的东西，我明天会选择一个答案。这是我随后发现的另一篇博客文章，它也很有帮助:What is this? by Mike Alsup .

Answer 1

我认为，如果您不仔细阅读，雷米·夏普 (Remy Sharp) 的帖子会令人困惑。 this 的含义永远不会改变。在您给出的示例中，有 2 次使用 this。作为事件中的 DOM 元素:

$('a').click(function() {
    alert(this.tagName);
});

并在事件中包装为 jQuery 对象:

$('a').click(function() {
    alert($(this).val());
});

如果您仔细阅读上面的 2 个片段，您会发现 this 的含义永远不会改变。它始终引用 DOM 元素。区别在于它的使用方式。

在 jQuery 中，默认情况下，this 指的是触发事件的 DOM 元素(不是 jQuery 对象)。在上面的第二个代码片段中，它仍然是相同的 DOM 元素，只是通过将 $() 包裹在 jQuery 元素中。与 jQuery 构造函数的任何参数一样，将 this 传递到构造函数中会将其转换为 jQuery 对象。

我认为当 Remy 开始在同一篇文章中谈论 jQuery 插件和 jQuery 事件时，就会出现困惑。 jQuery 插件是人们很少编写但经常使用的东西。编写 jQuery 插件时，您是在 jQuery 对象原型(prototype)的上下文中工作。在本例中，您使用单词 this 来引用您正在编写的插件。在正常用例中，您不会经常编写插件，因此这是一种不太常见的情况。当不在插件范围内时，您不能使用 this 来引用 jQuery 对象。

<小时/>

在 JavaScript 语言中，关键字 this 指的是 JavaScript 中对象的当前实例。当在 JavaScript 原型(prototype)中使用时，它指的是原型(prototype)的实例。根据浏览器的不同，当使用非 jquery 事件模型时，this 也引用 DOM 元素。由于某些浏览器 (Internet Explorer) 不会将 this 引用为事件中的 DOM 元素，因此处理事件变得很困难。为了解决这个问题，jQuery 执行了一些 JavaScript 魔法，总是使 this 引用触发事件的 DOM 元素。这是使用 JavaScript 框架而不是自己开发框架的(众多)原因之一。