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

问题

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

回答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');

回答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);

回答3:

Yes, if you are making a reference to $(this) multiple times you should store it in a variable. $this is just a convention to let others know that $this represents a jquery object.

This is even more important if your jquery object was created with a complex selector.

Also, in your pseudocode example you can generally make use of chaining on $(this).

Example:

$(this).addClass("someclass").css({"color": "red"});

回答4:

@Box9 is totally on point. I can't tell you how many times I have to refactor jQuery b/c people don't use caching.

I would also add that combined with caching that people need to learn to do this:

var $element = $("#elementId"),
    elementLength = $element.length,
    elementText = $element.text(),
    someString = "someValue",
    someInt = 0,
    someObj = null;

instead of this:

var $element = $("#elementId");
var elementLength = $element.length;
var elementText = $element.text();
var someString = "someValue";
var someInt = 0;
var someObj = null;

来源：https://stackoverflow.com/questions/5724400/does-using-this-instead-of-this-provide-a-performance-enhancement

标签

javascript

jquery

caching

this