在jQuery中使用'this'关键字的上下文 [英] Using the context of the 'this' keyword with jQuery

问题描述

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

As a jQuery neophyte I am somewhat confused by the different contexts in which the this keyword is used. Sometimes it refers to a DOM element e.g. this.id and sometimes it refers to a jQuery object e.g. $(this).val().

雷米·夏普(Remy Sharp)的博客文章是有用，但我想知道您将如何向新手解释这些区别.区别严格来说是jQuery问题还是所有Javascript共有?

Remy Sharp's blog post is helpful but I would like to know how you would explain the difference to a novice. Is the difference strictly a jQuery issue or common to all Javascript?

感谢到目前为止的所有回复-很棒的东西，明天我会选择一个答案.这是我随后遇到的另一篇博客文章，也很有帮助:这是什么?由Mike Alsup .

Thanks for all the responses so far - great stuff, I will pick an answer tomorrow. Here is another blog post I subsequently came across that was also helpful: What is this? by Mike Alsup.

推荐答案

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

Remy Sharp's post is confusing if you don't read it carefully, in my opinion. The meaning of this never changes. In the example you gave, there were 2 uses of this. As a DOM element in an event:

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

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

and wrapped as a jQuery object in an event:

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

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

If you read the 2 snippets above very carefully you'll notice that this never changes meaning. It always refers to the DOM element. The difference comes in how it is used.

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

In jQuery, by default, this refers to the DOM element (not a jQuery object) which triggered an event. In the second code snippet above, it is still the same DOM element, only it is wrapped in a jQuery element by wrapping $() around it. As with any argument to the jQuery constructor, passing this into the constructor transforms it into a jQuery object.

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

I think the confusion comes in when Remy starts talking about jQuery plugins in the same article as jQuery events. jQuery plugins are something that people rarely write and frequently use. When writing a jQuery plugin, you're working within the context of the jQuery object prototype. In this case, you're using the word this to refer to the plugin you're writing. In normal use-cases, you won't be writing plugins often so this is a much less common scenario. When not in the scope of the plugin, you can't use this to refer to the jQuery object.

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

In the JavaScript language, the keyword this refers to the current instance of an object in JavaScript. When being used in a JavaScript prototype, it refers to the instance of the prototype. Depending on the browser, when using the non-jquery event model, this also refers to the DOM element. Because some browsers (Internet Explorer) don't refer to this as the DOM element in an event, it makes working with events difficult. To get around this, jQuery performs some JavaScript magic that always makes this refer to the DOM element which triggered the event. That is (one of the many) reasons to use a JavaScript framework instead of rolling your own.

这篇关于在jQuery中使用'this'关键字的上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！