Should I refer to 'this' in a local variable?

Question

I often see this in code: var me = this; . Why is this? Is there some performance gain if I reference 'this' to a local variable?

Answer 1

It is useful if there are functions inside a function, so the code in these nested functions requires access to the this value from an external context.

 function example() { var me = this; document.getElementById('whatever').onclick = function() { me.clicked = 1; }; } 

Because this is reset for every function call, without putting the external this in the variable, there will be no way to refer to it from the internal function at all.

Answer 2

Used to save links to this . Later in the code there is an AJAX call with a callback (for example). Thus, inside this callback, this does not match the external. This is why people support the "external" this for a variable.

I personally like to use this form:

 var that = this; 

It looks funny :)

By the way, CoffeeScript , which is a kind of "javascript done right", also has a fix for this.

It has two forms for determining function, a thin arrow and a fat arrow. The thin arrow behaves exactly the same as in javascript, and the bold arrow automatically binds this to a value from the external context.

So this coffeescript

 Account = (customer, cart) -> # thin arrow @customer = customer @cart = cart $('.shopping_cart').bind 'click', (event) => # fat arrow @customer.purchase @cart 

converted to this javascript

 var Account; Account = function(customer, cart) { var _this = this; this.customer = customer; this.cart = cart; return $('.shopping_cart').bind('click', function(event) { return _this.customer.purchase(_this.cart); }); }; 

Cool, right?

Answer 3

This is so that when this changes, you still have a link to this at the point in the code that you need.

Answer 4

IMO, it’s unusual for you to see this yourself — this is a construction that is almost always used when closing to avoid JS processing this value evaluated at runtime rather than declaring it.

Answer 5

This is often used for callback methods, where the scope will differ with the callback.

Example:

 var me = this; $.getJSON(url, function(data) { // here "this" will be "window", so "me" is used to access the object }) 

Answer 6

The usual reason is that the code contains a closure that will be called later, and the author wants to make sure that the closure has access to the current this . Example:

Here is code that people often spell incorrectly, for example:

 var obj = { name: "Fred", foo: function() { setTimeout(function() { alert(this.name); // <=== Fails, `this` is no longer `obj` }, 1000); } }; obj.foo(); 

Here is this var me = this; applied to it:

 var obj = { name: "Fred", foo: function() { var me = this; setTimeout(function() { alert(me.name); // <=== Works now }, 1000); } }; obj.foo(); 

This is because in JavaScript this completely determined by how the function is called, and not where the function is defined.

Read more (disclosure: both are links to my blog):

• You must remember this
• Closures are not complicated

Answer 7

This is for the closing area. Look at the difference in these two jQuery plugins:

 $.fn.blinkClosure = function() { var jQueryMonad = this, toggleClass = this.toggleClass; setInterval(function() { toggleClass.apply(jQueryMonad, ['invisible']); }, 500); }; 

The problem is setInterval . When a function in setInterval is called, it starts a new execution chain, and this in this chain is bound to window . In the closure example, we store a reference to the jQuery object to which we are applying the plugin in jQueryMonad (or me in your code). That way we can save our scope in javascript.

 $.fn.blink = function() { setInterval($.proxy(function() { this.toggleClass('invisible'); }, this), 500); }; 

In the second example, jQuery.proxy handles this for you.

This is a solution to problems when javascript binds this at runtime rather than creation time.

Answer 8

Used with internal features. As you know, you can have functions in object constructors, and functions can be inside functions. If you see the code below.

 function Circle(radius){ this.radius=radius; this.getArea=function(){ var changeRadius=function(){ this.radius=20; //here this points to global } changeRadius(); return Math.PI*Math.pow(this.radius, 2); } } var cd= new Circle(10); console.log(cd.getArea()); 

When you call getArea (), you get the area according to the radius 10. Although you call changeRadius (), but inside the changeRadius internal function, this starts to point to the global object instead of the object you created. You use var self=this construct to get around here.

therefore, to get around this situation, we can have the following changes.

 function Circle(radius){ var self=this; this.radius=radius; this.getArea=function(){ var changeRadius=function(){ self.radius=20; } changeRadius(); return Math.PI*Math.pow(this.radius, 2); } } var cd= new Circle(10); console.log(cd.getArea());