使用 $this 而不是 $(this) 是否提供了性能增强? [英] Does using $this instead of $(this) provide a performance enhancement?

问题描述

假设我有以下示例:

示例一

$('.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)在使用超过一次/两次/三次或更多次时的使用.

The point isn't the actual code, but the use of $(this) when it is used more than once/twice/three times or more.

使用示例二比使用示例一在性能方面是否更好(可能会解释为什么或为什么不)?

Am I better off performance-wise using example two than example one (maybe with an explanation why or why not)?

编辑/注意

我怀疑两个更好；我有点害怕的是用 $this 填充我的代码，而不是当我不可避免地忘记将 $this 添加到时无意中引入一个潜在的难以诊断的错误一个事件处理程序.那么我应该使用 var $this = $(this) 还是 $this = $(this) ?

I suspect that two is better one; what I was a little fearful of was peppering my code with $this and than inadvertently introducing a potentially difficult-to-diagnosis bug when I inevitably forget to add the $this to an event handler. So should I use var $this = $(this), or $this = $(this) for this?

谢谢！

编辑

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

As Scott points out below, this is considered caching in jQuery.

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

贾里德

推荐答案

是的，一定要使用$this.

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

A new jQuery object must be constructed each time you use $(this), while $this keeps the same object for reuse.

性能测试表明$(this)显着 比 $this 慢.但是，由于两者都每秒执行数百万次操作，因此不太可能产生任何实际影响，但无论如何重用 jQuery 对象是更好的做法.真正性能影响出现的地方是当一个选择器而不是一个 DOM 对象被重复传递给 jQuery 构造函数时 - 例如$('p').

A performance test shows that $(this) is significantly slower than $this. However, as both are performing millions of operations a second, it is unlikely either will have any real impact, but it is better practice to reuse jQuery objects anyway. Where real performance impacts arise is when a selector, rather than a DOM object, is repeatedly passed to the jQuery constructor - e.g. $('p').

至于var的使用，再次总是使用var来声明新的变量.这样，该变量将只能在声明它的函数中访问，而不会与其他函数发生冲突.

As for the use of var, again always use var to declare new variables. By doing so, the variable will only be accessible in the function it is declared in, and will not conflict with other functions.

更好的是，jQuery 旨在与链接一起使用，因此请尽可能利用这一点.而不是声明一个变量并多次调用它的函数:

Even better, jQuery is designed to be used with chaining, so take advantage of this where possible. Instead of declaring a variable and calling functions on it multiple times:

var $this = $(this);
$this.addClass('aClass');
$this.text('Hello');

...将函数链接在一起，以使用不必要的附加变量:

...chain the functions together to make the use of an additional variable unecessary:

$(this).addClass('aClass').text('Hello');

这篇关于使用 $this 而不是 $(this) 是否提供了性能增强?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！