What is the difference between these three forms:
this
$this
$(this)
In typical usage you'll usually see them like this (the $this
usage may vary):
this
- Refers to the DOM element in the handler you're currently on, but this may be another object entirely in other situations, but it's always the context.$this
- Usually created by var $this = $(this)
a cached version of the jQuery wrapped version for efficiency (or chain off $(this)
to get the same in many cases).$(this)
- The jQuery wrapped version of the element, so you have access to all its methods (the ones in $.fn
specifically).$this
being used to reference the parent scope object, sort of like var that
. However I see how the jQuery fenomena could've influenced its meaning.
Oct 8, 2010 at 10:30
this
is the object upon which a method was called$this
is a poorly named variable with no special meaning$(this)
calls the poorly named function $
with this
as its only argumentthis
...what would you call it? given that $var
for the jQuery objects is a widely used convention? And for #3, what replacement do you suggest? There's a reason several libraries picked this (jQuery, MooTools, Prototype, Microsoft's....).
Oct 8, 2010 at 10:19
$
is poorly named for two main reasons. First, it tells you nothing about what the function does, that half a dozen libraries all use it for different things doesn't help as people who have to come in to deal with code then have to figure out what library is being used (it is made worse when multiple libraries are used togehter). Second, ECMA-262 3rd edition states "The dollar sign is intended for use only in mechanically generated code", this is a good way to stop such code conflicting with handwritten code. As for saving bandwidth, that's what a minifier is for.
_
, you'd have the same issue. As for ECMA-262 3rd edition (the 3rd edition is nearing 11 years old now), that's a very old spec, the 5th edition removed that statement for a reason.
Oct 8, 2010 at 10:58
In jQuery event handler:
this
- is a DOM element you assigned the event handler to$(this)
- is a jQuery object created from that element$this
- typically, a variable holding the result of $(this)
More generally:
this inside a function refers to the object or primitive the function is called on. When a function is used as a constructor, it refers to the new object being constructed. Outside of any function this
refers to the global object (window
in non-strict mode).
You can find a good detailed explanation on MDN.
$this is a variable name. In JavaScript variable names can start with $
. Some like to use it as a prefix for variables containing jQuery objects:
var body = document.body; // no prefix for a plain DOM object
var $body = jQuery('body'); // prefix for the same object wrapped in jQuery
var $this = $(this);
$(this) is a function call, where $
is a function name, and this
is its argument:
var $ = alert;
$(this); // [object Window]
$
doesn't have any special meaning per se. But jQuery defines the $()
function as a shorthand for jQuery()
. Depending on its arguments, this function can do many different things.
In the context of jQuery, 'this' is the object upon which a method was called. '$this' is indeed a poorly named variable with no special meaning. '$(this)' passes 'this' to jQuery, which will return a jQuery object associated with whatever 'this' is, as long as 'this' is a DOM object.
Expanding on what David said:
$this
is usually used to have a copy of the this
object in the current scope. For example with var $this = this;
you can use the variable $this
anywhere in the current scope and always be able to reference that object that would otherwise change if simply referenced with this
... I personally dislike the $this
naming convention and prefer something like var parentScope
$(this)
is a function (var $ = function(){}
) used by some frameworks like jQuery or PrototypeJs. The reason it is used is because $
is very easy to type instead of someLongFunctionName
and because it is usually called many times in the code it's easier to have it be as short as possible
Your question would be better served with more context.
However I assume you're asking about variables within the context of a callback on an element's event (click
for example).
this
is the context of your handler (normally the DOM element, in the case of a DOM event handler)$this
is usually used to store the result of $(this)
$(this)
returns the jQuery object that wraps this
- see the jQuery documentation for more information.