Does using $this instead of $(this) provide a performance enhancement?

Question

Assume I have the following example:

Example One

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $(this).stuff();
    $(this).moreStuff();
    $(this).otherStuff();
    $(this).herStuff();
    $(this).myStuff();
    $(this).theirStuff();
    $(this).children().each(function(){
        howMuchStuff();
    });
    $(this).tooMuchStuff();
    // Plus just some regular stuff
    $(this).css('display','none');
    $(this).css('font-weight','bold');
    $(this).has('.hisBabiesStuff').css('color','light blue');
    $(this).has('.herBabiesStuff').css('color','pink');
}

Now, it could be:

Example Two

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $this = $(this);
    $this.stuff();
    $this.moreStuff();
    $this.otherStuff();
    $this.herStuff();
    $this.myStuff();
    $this.theirStuff();
    $this.children().each(function(){
        howMuchStuff();
    });
    $this.tooMuchStuff();
    // Plus just some regular stuff
    $this.css('display','none');
    $this.css('font-weight','bold');
    $this.has('.hisBabiesStuff').css('color','light blue');
    $this.has('.herBabiesStuff').css('color','pink');
}

The point isn't the actual code, but the use of $(this) when it is used more than once/twice/three times or more.

Am I better off performance-wise using example two than example one (maybe with an explanation why or why not)?

EDIT/NOTE

I suspect that two is better one; what I was a little fearful of was peppering my code with $this and than inadvertently introducing a potentially difficult-to-diagnosis bug when I inevitably forget to add the $this to an event handler. So should I use var $this = $(this), or $this = $(this) for this?

Thanks!

EDIT

As Scott points out below, this is considered caching in jQuery.

http://jquery-howto.blogspot.com/2008/12/caching-in-jquery.html

Jared

Answer 1

Yes, definitely use $this.

A new jQuery object must be constructed each time you use $(this), while $this keeps the same object for reuse.

---

A performance test shows that $(this) is significantly slower than $this. However, as both are performing millions of operations a second, it is unlikely either will have any real impact, but it is better practice to reuse jQuery objects anyway. Where real performance impacts arise is when a selector, rather than a DOM object, is repeatedly passed to the jQuery constructor - e.g. $('p').

---

As for the use of var, again always use var to declare new variables. By doing so, the variable will only be accessible in the function it is declared in, and will not conflict with other functions.

---

Even better, jQuery is designed to be used with chaining, so take advantage of this where possible. Instead of declaring a variable and calling functions on it multiple times:

var $this = $(this);
$this.addClass('aClass');
$this.text('Hello');

...chain the functions together to make the use of an additional variable unecessary:

$(this).addClass('aClass').text('Hello');

Answer 2

Go to a page with jQuery and run this in your console. I know it's awful but you can see that $this wins out every time.

var time = new Date().getTime();
$('div').each(function() {
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
});
var now = new Date().getTime();
console.log(now- time);

var var_time = new Date().getTime();
$('div').each(function() {
  var $this = $(this);
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
});
var var_now = new Date().getTime();
console.log(var_now - var_time);