2009-02-16 58 views
7

作为jQuery初学者,我对使用关键字的不同上下文有些困惑。有时它指DOM元素,例如this.id有时它指的是一个jQuery对象,例如$(this).val()在jQuery中使用'this'关键字的上下文

Remy Sharp's blog post是有帮助的,但我想知道你如何解释一个新手的区别。所有Javascript的差异是严格的jQuery问题吗?

感谢所有迄今为止的回应 - 伟大的东西,我明天会选择一个答案。这是我后来遇到的另一篇博文,也很有帮助:What is this? by Mike Alsup

回答

17

雷米夏普的帖子令人困惑,如果你没有仔细阅读它,在我看来。 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框架而不是滚动你自己的)许多原因之一。

2

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

this这里指的是DOM元素; $()函数调用是将jQuery对象中的DOM元素包装起来的东西。对于jQuery事件回调,this将(几乎?)始终引用DOM元素。当编写一个扩展jQuery的函数时,可以用$('select')。myfunc()来调用,this将引用一个jQuery对象。


在JavaScript在一般情况下,当一个函数被调用作为对象(该方法的前瞻性调用)的性质this适用。所以给出的函数:

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中,对象种类“这”指的是功能更多地取决于一个函数是如何被调用比功能可按实际定义。

4

不要忘了,如果你不知道什么是“本”在任何给定的情况下,你可以在Firebug使用它诊断控制台:如果你正在使用jQuery

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

(你提到你),你总是可以保证,“这”仍然是这样一个jQuery对象:

this = $(this); 

然后,早在控制台中,你可以看到什么的jQuery对象“这”通过将其记录在Firebug中:

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

最后,因为我们在谈论jQuery,所以有一些“this”变化的例子。例如,当您在动画或淡入或淡出之后进行回调时。在这种情况下,“this”将指接收效果的项目。

只要记住,如果你不知道什么“这个”是...问Firebug。 Firebug看到了所有。萤火虫知道所有。

2

jQuery Proxy可能会帮助您获得答案。您可以调用jQuery函数并更改范围引用的对象。

例如例如:

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

}; 

$.proxy(me.test(), me); //prints 'zombie'