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?
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.