Does using $this instead of $(this) provide a performance enhancement?

by

Yes, definitely use $this.

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

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').

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.

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

More Related Contents:

  1. What’s the difference between ‘$(this)’ and ‘this’?
  2. Is Safari on iOS 6 caching $.ajax results?
  3. How do you cache an image in Javascript
  4. How do I pass the this context to a function?
  5. Caching a jquery ajax response in javascript/browser
  6. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  7. TypeError: Cannot read property ‘setState’ of undefined
  8. Why cache jQuery objects?
  9. Better way to prevent browser caching of JavaScript files
  10. JS Object this.method() breaks via jQuery
  11. jQuery/JavaScript “this” pointer confusion
  12. Save access to this scope
  13. Post-loading : check if an image is in the browser cache
  14. How to count the characters in a input text [closed]
  15. jQuery 1.9 .live() is not a function
  16. How to bind fancybox to dynamic added element?
  17. How to add an object to an array
  18. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie
  19. Cancel/kill window.setTimeout() before it happens
  20. Serialize object to query string in JavaScript/jQuery [duplicate]
  21. C# Web method is not calling in javascript
  22. How to get all selected values from ?
  23. Auto-refreshing div with jQuery – setTimeout or another method?
  24. Set content of iframe
  25. How To Show And Hide Input Fields Based On Radio Button Selection
  26. jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content
  27. Access CSS file contents via JavaScript
  28. Catch only keypresses that change input?
  29. How can I include all JavaScript files in a directory via JavaScript file?
  30. Check which element has been clicked with jQuery

Leave a Comment