O uso de $ this em vez de $ (this) fornece um aprimoramento de desempenho?

Suponha que eu tenha o seguinte exemplo:

Exemplo um

$('.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'); } 

Agora, pode ser:

Exemplo dois

 $('.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'); } 

O ponto não é o código real, mas o uso de $(this) quando é usado mais de uma vez / duas vezes / três vezes ou mais.

Estou melhor no desempenho usando o exemplo dois do que o exemplo um (talvez com uma explicação por que ou por que não)?

EDITAR NOTA

Eu suspeito que dois é melhor um; O que eu estava com um pouco de medo era salpicar meu código com $this e, inadvertidamente, introduzir um bug potencialmente difícil de diagnosticar quando inevitavelmente esqueci de adicionar o $this a um manipulador de events. Então devo usar var $this = $(this) , ou $this = $(this) para isso?

Obrigado!

EDITAR

Como Scott aponta abaixo, isso é considerado cache no jQuery.

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

Jared

Sim, definitivamente use $this .

Um novo object jQuery deve ser construído toda vez que você usar $(this) , enquanto $this mantém o mesmo object para reutilização.


Um teste de desempenho mostra que $(this) é significativamente mais lento que $this . No entanto, como os dois estão realizando milhões de operações por segundo, é improvável que ambos tenham algum impacto real, mas é uma prática melhor reutilizar os objects jQuery de qualquer maneira. Quando surgem impactos reais no desempenho é quando um seletor, em vez de um object DOM, é repetidamente passado para o construtor jQuery – por exemplo, $('p') .


Quanto ao uso de var , sempre use var para declarar novas variables. Ao fazer isso, a variável só estará acessível na function em que está declarada e não entrará em conflito com outras funções.


Melhor ainda, o jQuery é projetado para ser usado com encadeamento, então aproveite isso sempre que possível. Em vez de declarar uma variável e chamar funções nela várias vezes:

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

… encadear as funções para tornar desnecessária a utilização de uma variável adicional:

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

Vá para uma página com jQuery e execute isso no seu console. Eu sei que é horrível, mas você pode ver que $ isso vence toda vez.

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

Sim, se você estiver fazendo uma referência a $ (this) várias vezes, deverá armazená-lo em uma variável. $ isso é apenas uma convenção para informar aos outros que $ this representa um object jquery.

Isso é ainda mais importante se o seu object jquery foi criado com um seletor complexo.

Além disso, no seu exemplo de pseudocódigo, você geralmente pode usar o encadeamento em $ (this).

Exemplo:

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

@ Box9 é totalmente no ponto. Eu não posso te dizer quantas vezes eu tenho que refatorar o jQuery b / c as pessoas não usam o cache.

Eu também acrescentaria que, combinado com o cache, as pessoas precisam aprender a fazer isso:

 var $element = $("#elementId"), elementLength = $element.length, elementText = $element.text(), someString = "someValue", someInt = 0, someObj = null; 

em vez disso:

 var $element = $("#elementId"); var elementLength = $element.length; var elementText = $element.text(); var someString = "someValue"; var someInt = 0; var someObj = null;