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

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

Remy Sharp的博文很有帮助,但我想知道你将如何解释新手的差异。 严格区别是jQuery问题或所有Javascript的共同点?

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

如果你不仔细阅读,我认为雷米夏普的post会令人困惑。 这种意义永远不会改变。 在你给出的例子中,有2个用途。 作为事件中的DOM元素:

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

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

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

如果您仔细阅读上面的2个片段,您会发现this永远不会改变含义。 它总是指DOM元素。 不同之处在于如何使用它。

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

我认为当Remy在与jQuery事件相同的文章中开始讨论jQuery插件时会产生混淆。 jQuery插件是人们很少编写和经常使用的东西。 在编写jQuery插件时,您正在jQuery对象原型的上下文中工作。 在这种情况下,您使用单词this来指代您正在编写的插件。 在正常的用例中,您不会经常编写插件,因此这是一种不太常见的情况。 当不在插件的范围内时,您不能使用this来引用jQuery对象。


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

不要忘记,如果您不确定任何给定上下文中的“this”是什么,您可以使用控制台在Firebug中进行诊断:

 console.log("This is: " + this) 

如果你正在使用jQuery(正如你提到的那样),你可以通过这样做始终确保“this”仍然是一个jQuery对象:

 this = $(this); 

然后,回到控制台,您可以通过在Firebug中记录它来查看“this”的jQuery对象:

 console.log("The jQuery This is: " + $(this)) 

最后,由于我们讨论的是jQuery,有些情况下“this”会发生变化。 例如,当您在动画或fadeIn或fadeOut之后进行回调时。 在该上下文中,“this”将指代接收效果的项目。

请记住,如果你不确定“这个”是什么……请问Firebug。 萤火虫看到了所有。 萤火虫知道所有。

有时它指的是一个jQuery对象,例如$(this).val()

这里指的是DOM元素; $()函数调用将DOM元素包装在jQuery对象中。 对于jQuery事件回调, this将(几乎?)总是引用DOM元素。 在编写扩展jQuery的函数时,可以使用$(’select’)。myfunc()调用, this将引用jQuery对象。


在JavaScript中,一般情况下,当函数作为对象的属性(看起来像方法的调用)被调用时, this适用。 所以给定function:

 function foo() { doSomethingWith(this); } var obj1 = {'foo': foo}; var obj2 = {}; obj2.myFoo = foo; obj1.foo(); // calls function foo(), with 'this' set to obj1 obj2.myFoo(); // calls function foo(), with 'this' set to obj2 foo(); // calls function foo(), with 'this' set to the global object // (which, in a browser, is the window object) foo.apply(new Date()); // calls foo(), with 'this' set to a Date object 

因此,在Javascript中,’this’在函数中引用的对象类型更多地取决于函数的调用方式而不是函数的实际定义。

jQuery代理可能会帮助您获得答案。 您可以调用jQuery函数并更改this作用域引用的对象。

例如:

 var me = { type: "zombie" ,test: function() {$('#result').html(this.type)} }; $.proxy( me.test(), me ); //prints 'zombie'