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

Answer 1

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.