Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The use of "this" is confusing me in JavaScript

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?

like image 894
Anil Namde Avatar asked Jan 27 '10 16:01

Anil Namde


People also ask

What is the use of this in JavaScript?

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.

What is differnce between $this and this in JavaScript?

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)

What does $$ mean in JavaScript?

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


2 Answers

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.

like image 187
AnthonyWJones Avatar answered Oct 05 '22 14:10

AnthonyWJones


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.

like image 20
Teun D Avatar answered Oct 05 '22 14:10

Teun D