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

What is the difference between these three forms:

this
$this
$(this)

Answers:

Answer

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

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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.