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)吗？

谢谢！

修改

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

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

贾里德

Answer 1

是的，绝对使用$this。

每次使用$(this)时都必须构建一个新的jQuery对象，而$this保留相同的对象以供重用。

performance test表示$(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的页面并在控制台中运行它。我知道这很糟糕，但你可以看到$每次都赢了。

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代表一个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;

使用$ this代替$（this）可以提供性能提升吗？

4 个答案: