Should I reference 'this' in local variabl

Question

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

Answer 1

It is used with inner functions. As you know, you can have functions in object constructors and there can be functions 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 will get area according to radius 10. Although you are calling changeRadius() but inside inner function changeRadius, this starts to point to global object instead of the object you created. You use var self=this construct to get around here.

so in order 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());

Answer 2

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

Answer 3

It's useful if there are functions inside a function, such that code in those nested functions needs access to the value of this from the outer context.

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

Because this is established anew for every function call, without stashing the outer this in a variable there'd be no way to reference it at all from the inner function.

Answer 4

That is often used for callback methods, where the scope would be different when the callback runs.

Example:

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

Answer 5

This is used to save reference to this. Later in the code there's an AJAX call with a callback (for example). So, inside of that callback this is not the same as outside. That's why people back up "outer" this to a variable.

I personally like to use this form:

var that = this;

Looks funny :)

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

It has two forms for function definition, thin arrow and fat arrow. Thin arrow behaves exactly like in javascript, and fat arrow automatically binds this to a value from outer context.

So, this coffeescript

Account = (customer, cart) -> # thin arrow
  @customer = customer
  @cart = cart

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

gets transformed 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, isn't it?

Answer 6

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

Here's code that people frequently write incorrectly, like this:

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

Here's that 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 comes about because in JavaScript, this is defined entirely by how a function is called, not where the function is defined.

More reading (disclosure: both are links to my blog):

• You must remember this
• Closures are not complicated