CODEWITHSUNDEEP
javascriptjquery
oshirowanen
oshirowanen

Reputation: 15925

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

What is the difference between these three forms:

this
$this
$(this)

Upvotes: 41

Views: 19037

Answers (6)

Alexey Lebedev
Alexey Lebedev

Reputation: 12197

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.

Upvotes: 9

Quentin
Quentin

Reputation: 943615

  • 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

Upvotes: 32

Luca Matteis
Luca Matteis

Reputation: 29267

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

Upvotes: 1

tKe
tKe

Reputation: 560

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.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630439

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

Upvotes: 54

Jez
Jez

Reputation: 30003

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.

Upvotes: 1

Related Questions