Constructor Based Inheritance in JavaScript

Question

I have the following code:

        function Vector(X,Y) //Constructor
        {
            this.X = X;
            this.Y = Y;
        }

        function Box(Size /*Vector*/, Position /*Vector*/) //Constructor
        {
            this.Size = Size;
            this.Position = Position;
            this.Velocity = new Vector(0,0);
            this.Anchored = true;
            this.CanCollide = false;
            this.Colour = "rgb(50,50,50)";

            this.draw = function()
            {
                ctx.fillStyle = this.Colour;
                ctx.fillRect(this.Position.X-(this.Size.X*0.5),this.Position.Y-(this.Size.Y*0.5),this.Size.X,this.Size.Y);
            }
        }

        function Player(Size,Position)
        {
            Box(Size,Position);
            this.Anchored = false;
            this.CanCollide = true;
            this.Colour = "rgb(0,100,0)";
        }

        var Me = new Player(new Vector(25,25), new Vector(10,10));
        console.log(Me.Velocity);

If you look at the first statement in the constructor function, 'Player', you'll see that I called the function Box; I'm trying to inherit the properties and methods of 'Box' into 'Player'. I don't get any errors, however when I try and reference an inherited property, (the last statement), it returns undefined.

Why doesn't Player inherit Box's properties? I understand that JS is prototype based, and that this is extremely unorthodox, but I cannot make any sense as to how to inherit through multiple objects using prototypes.

Thank you! One question: Why doesn't the function automatically assume the scope of 'this'? — Someone, Apr 20 '14 at 22:43
More on inheritance, constructor functions and prototype here.http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Apr 21 '14 at 01:10

Akinkunle Allen · Accepted Answer · 2014-04-20T22:50:05.463

It will not inherit the properties of Box that way. That is because you are calling the Box function on the global context and the value of this will point to the global object window. To change the value of the this inside the function, use call() or apply() or even bind(). When you change the value of this this way inside the Player function, the initialisation code inside Box will be run with the instance of Player as its context.

function Player(Size,Position)
 {
   Box.call(this,Size,Position); //the this value will point to instance of Player
}

score 1 · Answer 2 · answered Apr 20 '14 at 23:09

1

Another options is to set Player's prototype:

Player.prototype = new Box();
Player.prototype.constructor = Player;

Then you wouldn't call the Box constructor directly. It would be called for you, so:

function Player(Size,Position)
{
    this.Size = Size;
    this.Position = Position;
    this.Anchored = false;
    this.CanCollide = true;
    this.Colour = "rgb(0,100,0)";
}

answered Apr 20 '14 at 23:09

lululala

11
1

Better use object.create and box.call to inherit prototype and instance specific members. Now you're inheriting instance specific members on the shared prototype. http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR Apr 21 '14 at 01:09

Constructor Based Inheritance in JavaScript

2 Answers2