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