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?
In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object.
this - is a DOM element you assigned the event handler to. $(this) - is a jQuery object created from that element. $this - typically, a variable holding the result of $(this)
$ and $$ are valid variable names in JavaScript, they have no special meaning. Usually they set their value to library instances, in your example if you check the closure call, at the end of the file you'll see that $ is jQuery in this case if it is defined and $$ is cytoscape.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With