Understanding JavaScript Inheritance

Question

Block = function (){
 this.type = 'block';
 if(arguments[0]) this.type = arguments[0];

 this.location = {x: 0, y: 0};
 function update(){

   }
}

Empty = function(location){
this.prototype = new Block;

this.type = 'empty';
this.location = location;
}

I want to be able to call

var x = new Empty();
x.update();

But I get the error that x.update is not a function.

Answer 1

The prototype property is only useful on a function. In the Empty constructor you're setting it on each instance of Empty, so it basically does nothing.

A much better way to do inheritance with JavaScript than what you're trying to do is to set the prototype of the inheriting class to inherit from the prototype of the base class:

Empty.prototype = Object.create(Block.prototype);

... and in order to inherit the properties set in the base class constructor, you simply call it with the correct arguments in the inheriting class constructor:

Empty = function(location) {
  Block.call(this, location); // call base class
  // other code, specific to your inheriting class
}

Note that the Empty.prototype line should come after you define Empty:

Empty = function(location) {
  Block.call(this, location); // call base class
  // other code, specific to your inheriting class
}
Empty.prototype = Object.create(Block.prototype);

Finally, to make methods available to instances you can define them in the constructor for each instance:

Block = function() {
  this.update = function() { };
}

... or on the prototype of the constructor (after you define the constructor, obviously):

Block.prototype.update = function() {};

I don't know your particular scenario, but it seems to me that your inheritance is slightly weird. Usually the base is the more generic type (with variable location) and the inheriting class specializes it. The base class would be Doctor (person who treats diseases) and the inheriting class would be Dentist (person who treats certain kinds of diseases).

Answer 2

You don't set the prototype of this inside the constructor (where it would point to the new object, which doesn't have a prototype property with any meaning), you set it on the constructor directly ( Block in this case).

Also, update is hidden in your case. You need to assign it to this (not so great practice) or make it part of Block 's prototype, which you should, otherwise there is no real point using delegation or inheritance here.

Your code should look more or less like...

var Block = function () {
    this.type = 'block';
    if (arguments[0]) this.type = arguments[0];
    this.location = {
        x: 0,
        y: 0
    };
};

Block.prototype.update = function () {
    console.log("updating");
};

var Empty = function (location) {
    this.type = 'empty';
    this.location = location;
};

Empty.prototype = new Block;

var x = new Empty();
x.update();

jsFiddle .