Javascript jQuery 中的 $this 与 $(this)

$this vs $(this) in jQuery

提问by larryq

I've seen some discussions on SO regarding $(this)vs $thisin jQuery, and they make sense to me. (See discussion herefor an example.)

我已经看到了关于SO一些讨论$(this)VS $thisjQuery中，他们道理给我。（有关示例，请参见此处的讨论。）

But what about the snippet below, from the jQuery website plugin tutorial showing how chainability works?

但是下面的代码片段，来自 jQuery 网站插件教程，展示了可链接性是如何工作的？

(function ($) {

    $.fn.lockDimensions = function (type) {

        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }

        });

    };
})(jQuery);

What does $thisrepresent above? Just when I think I have it figured out ...

$this上面代表什么？就在我想我已经想通了的时候......

回答by Joe

$thisis just an ordinary variable. The $character is a valid character in variable names, so $thisacts the same as any other non-reserved variable name. It's functionally identical to calling a variable JellyBean.

$this只是一个普通的变量。该$字符是变量名中的有效字符，因此其$this作用与任何其他非保留变量名相同。它在功能上与调用变量相同JellyBean。

回答by ThiefMaster

You usually use var $this = $(this);to avoid creating a new jQuery object more often than necessary. In case of the code below you only create one object instead of two/four. It is completely unrelated to chainability.

您通常var $this = $(this);用来避免不必要地频繁创建新的 jQuery 对象。在下面的代码的情况下，您只创建一个对象而不是两个/四个。它与可链接性完全无关。

You could also call it that, $thi$or anything else (don't use the latter one though, it's ugly :p) as $is just a simple character in JavaScript, exactly like a-z are.

您也可以将它称为that，$thi$或其他任何名称（尽管不要使用后者，它很丑：p），因为$它只是 JavaScript 中的一个简单字符，就像 az 一样。

回答by jondavidjohn

thisin javascript (usually) represents a reference to the object that invoked the current function. This concept is somewhat fuzzied a bit by jQuery's attempts to make the use of thismore user friendly within their .each()looping stucture.

this在javascript中（通常）表示对调用当前函数的对象的引用。由于 jQuery 试图this在其.each()循环结构中使用更友好的用户，这个概念有些模糊。

outsidethe .each(), thisrepresents the jQuery object that .lockDimensionsis invoked by.

外的.each()，this表示该jQuery对象.lockDimensions被调用。

insidethe .each()it represents the current iterated DOM object.

内部的.each()它代表当前迭代DOM对象。

Generally the purpose of storing $(this)in a local variable is to prevent you from calling the jQuery function $()multiple times, caching a jQueryizedthisshould help efficiency if you have to use it multiple times.

通常，存储$(this)在局部变量中的目的是防止您$()多次调用 jQuery 函数，如果您必须多次使用它，则缓存jQueryizedthis应该有助于提高效率。

$is simply a valid variable name character and is used as the first character of a variable name usuallyto queue the programmer that it is a jQuery object already (and has the associated methods/properties available).

$是一个简单的有效的变量名字符，并且被用作变量名称的第一个字符通常排队编程，这是一个jQuery对象已经（并具有相关联的方法可用/属性）。

This question is actually unrelated to chain-ability, but to maintain chain-ability you should return thisso that other function calls can be added, and maintain the meaning of thisin those calls as well.

这个问题实际上与链能力无关，但是为了保持链能力，您应该返回this以便可以添加其他函数调用，并保持this这些调用中的含义。

回答by evan

you may have overlooked this line:

你可能忽略了这一行：

var $this = $(this);

Here, $thisis just a variable that holds the value of $(this). You can use it interchangeably with $(this)with the benefit that you aren't doing the same lookup over and over.

这里，$this只是一个保存 值的变量$(this)。您可以交替使用它$(this)，好处是您不必一遍又一遍地进行相同的查找。

回答by Ned Batchelder

$thisis simply a local variable, named that way to remind you of $(this). It saves the work of creating the jQuery version of this, and you can use it a number of times.

$this只是一个局部变量，以这种方式命名以提醒您$(this). 它节省了创建 jQuery 版本的工作this，您可以多次使用它。

回答by Billy Moon

$this = $(this)is a way to cache the jQuery object. It is expensive to run the jQuery function each time, so storing the output allows you to re-use the selector over and over again without calling jQuery function again.

$this = $(this)是一种缓存 jQuery 对象的方法。每次运行 jQuery 函数的代价都很高，因此存储输出允许您一遍又一遍地重用选择器，而无需再次调用 jQuery 函数。

回答by Justin Niessner

$thisis just a local copy of thiswrapped in jQuery.

$this只是this包裹在 jQuery 中的本地副本。

In the long term, keeping a local copy rather than wrapping thiseach time it is needed is much more efficient.

从长远来看，保留本地副本而不是this每次需要时都进行包装会更有效率。

回答by genesis

It just fills $thisvariable with $(this), so you do not have to lookup for $(this)element every call. It has better performance

它只是用 填充$this变量$(this)，因此您不必$(this)每次调用都查找元素。它有更好的性能

var $this = $(this);

回答by Sudheer Kumar

 $this = $(this)

which means that you are assigning the current object to a variable named $this. It is not a keyword.

这意味着您将当前对象分配给名为$this. 它不是关键字。

It is just a variable name.

它只是一个变量名。

回答by Rocket Hazmat

Inside $.fn.lockDimensions, thisis the jQuery object that had lockDimensionscalled on it.

在里面$.fn.lockDimensions，this是lockDimensions调用它的 jQuery 对象。

Inside the .each, thisnow references the DOMElement in the current iteration of the loop. $(this)wraps the DOMElement in a jQuery object, and var $this = $(this);is just saving $(this)in a variable called $this, so the jQuery constructor doesn't need to be called multiple times (if you were to use $(this)instead).

在.each,this现在引用循环当前迭代中的 DOMElement。 $(this)将 DOMElement 包装在一个 jQuery 对象中，并且var $this = $(this);只是保存$(this)在一个名为 的变量中$this，因此不需要多次调用 jQuery 构造函数（如果您要使用它$(this)）。