Help, “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?

Answer 1

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.

Answer 2

use

var me = this;

outside of the

function(){

then you can refer to me inside the function()

Answer 3

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.

Answer 4

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.

Answer 5

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.