How to inherit an object in this case?

Question

This has probably been asked in some form and I tried to check this resource: https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

My gameobject.js looks like this:

function GameObject(program)
{
    this.program = program;
    this.graphics = null;
}

GameObject.prototype.update = function(dt)
{

}

GameObject.prototype.draw = function()
{
    // Here graphics would be the graphics of the child class, 
    // because the graphics would be replaced with the child class' graphics
    if(this.graphics !== null)
        this.program.renderer.render(this.graphics);
}

And I want to have another class called, for example, box.js:

function Box(program, width, height, x, y)
{
    // Call base constructor here?

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
}

And Now I want to basically inherit the update and draw methods from GameObject as well as call the GameObject constructor with the program parameter, so that in the end the thing should work like this:

var box = new Box(program, 10, 10, 100, 100);

// In game class update method
box.update(this.td);

// In game class draw method
box.draw();

So basically like how it would be done in C#. It would already help a lot, if only I could get the Box to inherit the update and draw methods from the GameObject.

Edit 1: Jsfiddle here: https://jsfiddle.net/0df9rfu5/1/

Edit 2: I tried a workaround like this:

function Box(program, width, height, x, y)
{
    var self = this;

    this.base = new GameObject(program);

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;

    this.update = function(dt) { self.base.update(dt); };
    this.draw = this.base.draw();
}

So I would be creating a new instance of the base class GameObject every time a Box is created and then I set the box' update and draw methods to those of GameObject.

This isn't doing the trick though and I think there is something deeply wrong with this method any way.

Edit 3: Maybe I should just do this like I've always done... everything that inherits from GameObject still has to override the update and draw methods. It is just that I guess I can't be sure that every object in gameobject list has draw and update methods and I will just have to assume they do.

Answer 1

Constructors in JavaScript are just plain functions. To call GameObject from inside the Box constructor you would use:

GameObject.call(this, program);

To have Box objects inherit form GameObject use

Object.setPrototypeOf(Box.prototype, GameObject.prototype);

Be sure to put the line above before the first invocation of new Box.

For best compatibility with older browsers (tanks @Bergi), you can overwrite Box.prototype with a new object instead of using Object.setPrototypeOf.

Box.prototype = Object.create(GameObject.prototype, { configurable: true, writable: true, value: Box });

Then you should be able to use the methods draw and update on Box objects.

The example below should get you on the right track

function GameObject(program)
{
    this.program = program;
    this.graphics = null;
}

GameObject.prototype.update = function(dt)
{
    alert('updating');
}

GameObject.prototype.draw = function()
{
    // Here graphics would be the graphics of the child class, 
    // because the graphics would be replaced with the child class' graphics
    if(this.graphics !== null)
        this.program.renderer.render(this.graphics);
}

function Box(program, width, height, x, y)
{
    GameObject.call(this, program);

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
}

Object.setPrototypeOf(Box.prototype, GameObject.prototype);

let b = new Box();

b.update();