How does 'this' work in JavaScript?

Question

I know that there are several other posts on this topic, but they still leave me confused.

I have included jQuery and that’s it, and, I have a simple javascript class, for example, this example:

function CarConstructor(){ this.speed=19; // in mph this.make="Ford"; this.fillKph=fillKph; } function fillKph(){ $("#kphdiv").html(this.speed*1.61); } car1 = new CarConstructor(); car1.fillKph(); 

Now I know that this piece of code does not work and has not been configured correctly.

In the key "this" there is a link to my dom element with the identifier "kphdiv".

The question I have is the best way to handle this.

I saw one method in which you set some variable equal to this (binding it), and then use this variable to refer to your object. For instance:

 function CarConstructor(){ this.speed=19; // in mph this.make="Ford"; this.fillKph=fillKph; } function fillKph(){ var me=this; $("#kphdiv").html(me.speed*1.61); } car1 = new CarConstructor(); car1.fillKph(); 

I could also make me a global variable ... I don't know.

I was just curious if there is another / better way.

Answer 1

Oh boy, you are confusing a lot of things.

 function CarConstructor(){ this.speed=19; // in mph this.make="Ford"; this.fillKph; // <-> This particular statement has no meaning. //When you write this.fillKph without any assignment, it will be 'undefined'. //Just because you have a function named 'fillKph' somewhere else, //it doesn't mean it will get attached to this property. } 

Try

 var toyota = new Car(); alert(typeof toyota.fillKph); //will alert undefined. 

The fillKph function is created in the global scope, i.e. as a property of the Window object.

 function fillKph(){ var me=this; $("#kphdiv").html(me.speed*1.61); } 

To fix this, you can do what rezzif suggested. Your last code will look like

 function Car() { this.speed=19; // in mph this.make="Ford"; this.fillKph = function (){ $("#kphdiv").html(this.speed*1.61); }; } car1 = new Car(); car1.fillKph(); 

If you noticed, I did not keep a reference to 'this' inside a local variable. What for? There is no need for this scenario. To find out more, see my detailed answer here .

If you intend to create many Car objects, you can define the fillKph method on the prototype.

 function Car() { this.speed=19; // in mph this.make="Ford"; } Car.prototype.fillKph = function fillKph() { $("#kphdiv").html(this.speed*1.61); }; car1 = new Car(); car1.fillKph(); 

EDIT:

If you do something like

 function CarConstructor(){ this.speed=19; // in mph this.make="Ford"; this.fillKph = fillKph; } function fillKph(){ $("#kphdiv").html(me.speed*1.61); } car1 = new Car(); car1.fillKph(); //This will work as expected. 

But the problem is that fillKph is defined in the Window area, so I can call it directly,

 fillKph(); //Calling it this way will break it as it won't get correct 'this'. 

Point,

 alert(typeof fillKph); // alerts 'function' if you do it your way, alert(typeof fillKph); // alerts 'undefined', if you do it the way I suggested, which is preferred in my opinion. 

Answer 2

 function CarConstructor(){ var _this = this; this.speed=19; // in mph this.make="Ford"; this.fillKph = function (){ $("#kphdiv").html(_this.speed*1.61); }; } car1 = new CarConstructor(); car1.fillKph(); 

Answer 3

There is absolutely nothing wrong with the last method, it is a wonderful and perhaps the most elegant way to do this, it just stores a link to the execution context at that moment and time for use in another execution context, where this link points to another object.

Answer 4

The misconception about this in javascript is the relation to the new operator. When you approach the chain of visibility, this always refers to the latest occlusion of new . If necessary, this means that everything returns to the window object. Therefore, if you have something like this:

 function MyObject() { this.baz = "some value"; this.bar = function() { return this.baz; } } var foo = new MyObject(); alert(foo.bar()); 

works as expected because the foo variable was created with a new object / scope for the this , so the link to this.baz points to the right place.

But if you do this:

 var foo = new MyObject(); var bar = foo.bar; alert(bar()); 

waiting for a call to the foo bar function, you call it outside the "scope" created by the new foo operator. Your use of this inside a bar function now looks at a window object that has no definition for baz .

This may seem red, but it’s important when working with frameworks such as jQuery that create many implicit objects using new ones or that expect you to pass functions around such variables. You have to be very careful.