使用 $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 保留相同的对象以供重复使用。

---

performance test 表明$(this) 比$this 慢明显。但是，由于两者都在每秒执行数百万次操作，因此两者都不太可能产生任何实际影响，但最好还是重用 jQuery 对象。 real 性能影响出现的地方是选择器而不是 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

是的，如果您多次引用 $(this)，您应该将它存储在一个变量中。 $this 只是一个约定，让其他人知道 $this 代表一个 jquery 对象。

如果您的 jquery 对象是使用复杂的选择器创建的，则这一点更为重要。

此外，在您的伪代码示例中，您通常可以使用 $(this) 上的链接。

例子：

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

Answer 4

@Box9 完全正确。我无法告诉你我必须重构多少次 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;