使用$ 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 来编写我的代码，并且当我不可避免地忘记添加<$ c $时无意中引入了一个可能难以诊断的错误c> $ 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

Jared

推荐答案

是的，绝对要使用 $ this 。

每次使用 $（this）时，必须构造一个新的jQuery对象，而 $ this 保留相同的对象以供重复使用。

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

A 性能测试显示 $（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屋！