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

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

Remy Sharp的博客文章很有帮助,但我想知道如何向新手解释这些差异.严格区别是jQuery问题或所有Javascript的共同点？

感谢到目前为止所有的回复 - 很棒的东西,明天我会回答.这是我后来遇到的另一篇博文,也有帮助: 这是什么？作者:Mike Alsup.

在我看来,如果你不仔细阅读,雷米夏普的帖子会令人困惑.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对象原型的上下文中工作.在这种情况下,您使用该词this来指代您正在编写的插件.在正常的用例中,您不会经常编写插件,因此这是一种不太常见的情况.当不在插件的范围内时,您不能用于this引用jQuery对象.

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