How does 'this' work in JavaScript?

Question

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

I've included jQuery and everything and, I have a simple javascript class like 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 that code snippet doesn't work and is not properly consturcted.

The "this" keyword there is referencing my dom element with the id of "kphdiv".

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

Ive seen one method where you set some variable equal to this (binding it) and then use that variable to reference your object. For example:

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 the me a global variable ... I don't know.

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

Answer 1

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 2

There's completely nothing wrong with the latter method, it's perfectly fine and probably the most elegant way of doing it, it just stores a reference to the execution context in that point and time for use in another execution context where the reference points to a different object.

Answer 3

Oh boy, you are confusing quite a few 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 global scope, i.e. as property of 'Window' object.

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

To fix it, you can what rezzif suggested. Your final 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 notice, I did not store reference to 'this' inside a local variable. Why? There is no need in this scenario. To understand more, see my detailed answer here.

If you are going to create lot of 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 'Window' scope, so I can directly call it like,

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

Point is,

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 4

The confusing thing about this in javascript is it's relationship to the new operator. As you walk up the scope chain, this always refers to the last occruance of new. If need be, that means going all the way back to the window object. So 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());

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

But then if you do this:

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

expecting to call foo's bar function, you're now calling it outside of the "scope" created for foo by the new operator. Your use of this inside the bar function now looks at the window object, which doesn't have a definition for baz.

That may seem like an edge case, but it's important when working with frameworks like jQuery that create a lot of implicit objects using new or that expect you to pass functions around like variables. You have to be very careful.