是否使用$ this而不是$（this）提供性能增强？

假设我有以下例子：

例子一 

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

使用示例二比示例一更好（可能为什么或为什么不解释）？

编辑/ NOTE

我怀疑这两个比较好， 我有点害怕的是用$thisencryption我的代码，并且当我不可避免地忘记把$this添加到事件处理程序时，无意中引入了一个潜在的难以诊断的错误。 那么我应该使用var $this = $(this) ，还是$this = $(this)呢？

谢谢！

编辑

正如Scott在下面指出的，这被认为是jQuery中的caching。

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

贾里德

是的，绝对使用$this 。

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

性能testing显示$(this)比$this慢得多。 但是，由于两者都在每秒执行数百万次操作，所以不可能有任何实际的影响，但最好重复使用jQuery对象。 在那里， 真正的性能影响是当一个select器，而不是一个DOM对象，反复传递给jQuery构造函数 – 例如$('p') 。

至于使用var ，再次总是使用var来声明新的variables。 通过这样做，variables只能在声明的函数中访问，并且不会与其他函数发生冲突。

更好的是，jQuery被devise为与链接一起使用，所以尽可能利用这个优势。 而不是声明一个variables和多次调用函数： 

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

…将这些function链接在一起，以使不必要的附加variables的使用： 

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

转到与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);

是的，如果你多次引用$（this），你应该把它存储在一个variables中。 $这只是一个让其他人知道$ this表示一个jquery对象的约定。

如果你的jQuery对象是用一个复杂的select器创build的话，这更加重要。

另外，在你的伪代码示例中，通常可以使用$（this）上的链接。

例： 

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

@ Box9完全是关键。 我不能告诉你我有多less次重构jQuery b / c的人不使用caching。

我还想补充说，结合caching，人们需要学习这样做： 

 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;
Interesting Posts