$this vs $(this) in jQuery

$this is just an ordinary variable. The $ character is a valid character in variable names, so $this acts the same as any other non-reserved variable name. It's functionally identical to calling a variable JellyBean.


You usually use var $this = $(this); to avoid creating a new jQuery object more often than necessary. In case of the code below you only create one object instead of two/four. It is completely unrelated to chainability.

You could also call it that, $thi$ or anything else (don't use the latter one though, it's ugly :p) as $ is just a simple character in JavaScript, exactly like a-z are.


this in javascript (usually) represents a reference to the object that invoked the current function. This concept is somewhat fuzzied a bit by jQuery's attempts to make the use of this more user friendly within their .each() looping stucture.

outside the .each(), this represents the jQuery object that .lockDimensions is invoked by.

inside the .each() it represents the current iterated DOM object.

Generally the purpose of storing $(this) in a local variable is to prevent you from calling the jQuery function $() multiple times, caching a jQueryized this should help efficiency if you have to use it multiple times.

$ is simply a valid variable name character and is used as the first character of a variable name usually to queue the programmer that it is a jQuery object already (and has the associated methods/properties available).

This question is actually unrelated to chain-ability, but to maintain chain-ability you should return this so that other function calls can be added, and maintain the meaning of this in those calls as well.


you may have overlooked this line:

var $this = $(this);

Here, $this is just a variable that holds the value of $(this). You can use it interchangeably with $(this) with the benefit that you aren't doing the same lookup over and over.