41

What is the difference between these three forms:

this
$this
$(this)
Gumbo
  • 643,351
  • 109
  • 780
  • 844
oshirowanen
  • 15,297
  • 82
  • 198
  • 350

6 Answers6

54

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).
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 2
    Before jQuery was famous I remember seeing `$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. – Luca Matteis Oct 08 '10 at 10:30
  • This answer assumes we're in an event handler: Alisey's answer is more general – meouw Oct 08 '10 at 11:49
  • @meouw - I don't think it assumes that, I caveat it immediately after: "but this may be another object entirely in other situations". *Most* of the time when you're seeing this, that's where you are (we are primarily event driven after all), but not the only place of course. – Nick Craver Oct 08 '10 at 11:52
32
  • 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
Matteo Riva
  • 24,728
  • 12
  • 72
  • 104
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Their variable names were chosen...poorly. – pauljwilliams Oct 08 '10 at 10:17
  • 16
    I disagree on your #2, it's a perfectly valid name for exactly what it was used for, it's a jquery wrapped version of `this`...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....). – Nick Craver Oct 08 '10 at 10:19
  • 3
    $this is definitely a widely used convention for the jQuery object $(this). Even used in the jQuery UI plugins as far as I remember.. – jamiebarrow Oct 08 '10 at 10:21
  • the function $ might be poorly named, but it is compact, which saves on bandwidth. If you deal with JavaScript a lot, $(this) is pretty much a no-brainer. – jamiebarrow Oct 08 '10 at 10:22
  • 5
    `$` 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. – Quentin Oct 08 '10 at 10:28
  • 1
    @David - What shorter variable would a minifier pick? Also code *in the page* often *isn't* minnified (in fact it's a PITA to do so). Multiple libraries in use is another issue...why are you using two? Of course I agree to avoid this at all costs....but that argument is dependent on the first, if they all use `_`, 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. – Nick Craver Oct 08 '10 at 10:58
  • It doesn't matter that the minifer picks, it doesn't have to output maintainable code (and what it does output is mechanically generated). People do use multiple libraries in a page, even if it is a bad idea. I'm not privy to the reasons behind the changes in the spec for 5th edition, but I wouldn't be surprised if the reason was "So many people ignore this, it isn't worth fighting for". – Quentin Oct 08 '10 at 11:31
  • 3
    @David - The 3rd edition is dated 1999, when geocities was one of the biggest things around (do we really want to base off the standard in place *then*?) and before pretty much every major libraries were even a dream. Look at when the *first* versions came out for each: Prototype: 2005, jQuery: 2006, MooTools: 2006....it wasn't even a concern when the 3rd edition was released, things change/evolve. – Nick Craver Oct 08 '10 at 11:56
9

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.

Alexey Lebedev
  • 11,988
  • 4
  • 39
  • 47
1

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.

Jez
  • 27,951
  • 32
  • 136
  • 233
1

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

Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
0

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.
tKe
  • 560
  • 2
  • 9