使用$ 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;