What is the difference between “this”, “$this” and “$(this)”?

Question

What is the difference between these three forms:

this
$this
$(this)

Answer 1

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).

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

• 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 argument

Answer 6

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