Accessing "$(this)" multiple times within the same function

Question

Possible Duplicate:
Caching $(this) in jQuery is a best practice?

I am curious, within the same function, when $(this) is called multiple times does it incur additional overhead for constructing the jQuery object in the subsequent calls? In other words, is $(this) cached the first time it's called? If not, would it be a better practice to store $(this) in a variable and use that variable when $(this) is needed subsequently?

Answer 1

$() is the jQuery constructor function.

this is a reference to the DOM element of invocation.

so basically, in $(this), you are just passing the this in $() as a parameter so that you could call jQuery methods and functions.

http://www.learningjquery.com/2007/08/what-is-this

good figures: http://jsperf.com/jquery-this-vs-this-vs-chain/2

You usually use var $this = $(this); to avoid creating a new jQuery object more often than necessary. In case of the code below you only create one object instead of two/four. It is completely unrelated to chainability.

this in javascript (usually) represents a reference to the object that invoked the current function.

Generally the purpose of storing $(this) in a local variable is to prevent you from calling the jQuery function $() multiple times, caching a jQueryized this should help efficiency if you have to use it multiple times.

$ is simply a valid variable name character and is used as the first character of a variable name usually to queue the programmer that it is a jQuery object already (and has the associated methods/properties available).

$this vs $(this) in jQuery

Answer 2

I've seen this construct used quite often:

var someFunc = function () {
    var that = $(this);
    // you could also cache like var $this = $(this);

    // do stuff here...
};

Each time you call $() there would be some overhead in making the call but not much. I don't think it would be noticeable if you didn't cache $(this). See SO entry on jquery cache of $(this)

Answer 3

Every time the expression $(this) is evaluated, the jQuery factory function is invoked, resulting in a new jQuery instance. However, the performance penalty of this process is negligible. I once calculated that it takes only a few micro-seconds (millionth of a second).

I, personally, don't worry about having $(this) multiple times within a function body. Caching the jQuery instance (var $this = $(this);) is an option, but I don't do it. (I happen to find the $this name ugly, compared to $( this ), and I understand that most people don't agree with me here.)

Answer 4

I did a quick test to see if there is added overhead to constructing a jQuery object using the $:

var start = (new Date).getTime();
for(var i=0; i<1000000; i++)
{
   var testClass = $("#testDiv").attr("class");
}
var end = (new Date).getTime();
alert(end-start);

all I'm doing here is running the code 1,000,000 times to see how long it takes to store the class of a jQuery object on the page to a variable. It took about 4.286 seconds. I then modified it to reference an already stored object:

var start = (new Date).getTime();
var testDiv = $("#testDiv");
for(var i=0; i<1000000; i++)
{
   var testClass = testDiv.attr("class");
}
var end = (new Date).getTime();
alert(end-start);

This one only took 1.254 seconds. While this is not exactly what you are asking, it does highlight that the process of generating a jQuery object takes more time than referencing something from an already generated object.

That said, the difference will likely be negligible for most applications.

Answer 5

When $(this) is called, it has to be called from within an already instantiated object. $(this) is just a reference to that object, and therefore, the overhead should be minimal.

I could be wrong, but please correct me if so.