The use of "this" is confusing me in JavaScript

Question

Working with the JavaScript one of the confusing thing is when using this

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

However when dealing with multiple object and especially events context of this changes and becomes confusing to keep track/understand.

So if anybody has better inputs/guidelines/thoughts/better practices, please share. Also I would like know if using this gives any (performance) advantage or what?

Stuartstub

It's not just you -- this is one of the more confusing aspects of the language. You should get some good answers; I'm looking forward to reading them. – Gentes

Answer 1

It's not about performance, it's about accessing a property of a specific instance of an object:-

x.init()

Would not display 'test' if you hadn't use this in the function.

Effectively the above line is the same as:-

x.init.call(x);

the first paramater in the use of call is assigned to this when the function is executed.

Now consider:-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

Now you get nothing in the alert. This because the above is effectively:-

fn.call(window);

In browser hosted Javascript the window object is synonymous with the global object. When a function is called "in the raw" then the this defaults to the global object.

The classic error is doing something like this:-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

However this doesn't work because the function attached to the onclick event is called by the browser using code like:-

onclick.call(theDOMElement)

Hence when the function is running this isn't what you think it is.

My usual solution to this situation is:-

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

Note the elem = null is IE memory leak work-around.

Desquamate

I think that should be x.init() not e.init() but the edit is <6 characters so I can't submit it. – Braasch

Answer 2

It is very confusing. It depends on how you call the function. Doug Crockford did a good write-up in his book Javascript, the Good Parts. The gist of it is in this excellent answer to an otherwise badly formulated question.

And no, it's not about performance.

Timework

Answer 3

To me, it helped a lot the following guideline: every time you see this think owner. The object who owns the variable name to which the function is assigned will become the this. If you cannot make sense to who owns it, then this will be window.

Starstarboard

Answer 4

A good and enlightening article on the this keyword is this (no pun intended). The article may clear things up for you, I know it did for me.

The essential rule is that the this keyword inside a function always refers to the function owner, and the key to understanding the consequences is understanding when functions are referred and when they are copied. See the beforementioned article for examples.

Messenia

Answer 5

use

var me = this;

outside of the

function(){

then you can refer to me inside the function()

Staffman