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

小编典典

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

javascript

假设我有以下示例：

例子一

$('.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)为此？

谢谢！

阅读 376

2020-05-01

共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');

2020-05-01