Question

作为jQuery新手，我对使用 this 关键字的不同背景感到困惑。有时它指的是DOM元素，例如 this.id ，有时它指的是jQuery对象，例如 $（本）.VAL（）

Remy Sharp's blog post很有帮助，但我想知道如何向新手解释差异。严格区别是jQuery问题还是所有Javascript的共同点？

感谢到目前为止所有的回复 - 很棒的东西，明天我会回答。这是我后来遇到的另一篇博文，也很有帮助：What is this? by Mike Alsup。

Answer 1

在我看来，如果你不仔细阅读，雷米夏普的帖子会令人困惑。 this的含义永远不会改变。在您给出的示例中，this有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构造函数的任何参数一样，将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框架而不是自己编写的框架（众多原因之一）。

Answer 2

不要忘记，如果您不确定任何给定上下文中的“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。萤火虫看到了所有。萤火虫知道所有。

Answer 3

有时它指的是jQuery对象，例如 $（本）.VAL（）

this这里指的是DOM元素; $（）函数调用是将DOM元素包装在jQuery对象中的内容。对于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中，'this'在函数中引用的对象类型更多地取决于函数的调用方式而不是函数的实际定义。

Answer 4

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

e.g。类似的东西：

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

};

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

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

4 个答案: