使用$ this代替$（this）是否可以提高性能？

Question

假设我有以下示例：

例子一

$('.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');

}

现在，可能是：

例子二

$('.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');

}

关键不是实际的代码，而是使用$(this)一次/两次/三次或更多次的时间。

我是不是更好的性能，明智使用例如两个比例如一个（也许与解释为什么或者为什么不）？

编辑/注意

我怀疑两个更好。我有点担心的是$this，我不可避免地忘记将其添加$this到事件处理程序中时，不小心引入了一个潜在的难以诊断的错误，而不是无意中引入了我的代码。那么我应该使用var $this = $(this)还是$this = $(this)为此？

谢谢！

编辑

正如Scott在下面指出的那样，这被认为是jQuery中的缓存。

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

Answer 1

是的，绝对可以使用$this。每次使用时$(this)，都必须构造一个新的jQuery对象，同时$this保留相同的对象以供重用。一个性能测试表明，$(this)是显著慢$this。但是，由于两者都每秒执行数百万个操作，因此它们都不大可能产生任何实际影响，但是无论如何，重用jQuery对象是一种更好的做法。当真正的性能影响出现是当一个选择，而不是一个DOM对象，反复传递给jQuery的构造-如$('p')。至于的使用var，再次始终使用var来声明新变量。这样，该变量将只能在声明它的函数中访问，并且不会与其他函数冲突。更好的是，jQuery设计为可与链接一起使用，因此请尽可能利用这一点。与其声明一个变量并多次调用该函数，不如说：var $this = $(this);$this.addClass('aClass');$this.text('Hello');...将函数链接在一起，以不必要地使用附加变量：$(this).addClass('aClass').text('Hello');

Answer 2

转到带有jQuery的页面，然后在控制台中运行它。我知道这很糟糕，但是您可以看到$ this每次都赢了。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);

Answer 3

我无法告诉您我必须重构jQuery b / c多少次，而人们不使用缓存。我还要补充一下人们需要学习的结合缓存的方法：var $element = $("#elementId"),    elementLength = $element.length,    elementText = $element.text(),    someString = "someValue",    someInt = 0,    someObj = null;代替这个：var $element = $("#elementId");var elementLength = $element.length;var elementText = $element.text();var someString = "someValue";var someInt = 0;var someObj = null;