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
– Someone, Commented Apr 20, 2014 at 22:43
More on inheritance, constructor functions and prototype here.stackoverflow.com/questions/16063394/… — HMR
– HMR, Commented Apr 21, 2014 at 1:10

Akinkunle Allen · Accepted Answer · 2014-04-20 22:50:05Z

2

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
}

edited Apr 20, 2014 at 22:50

answered Apr 20, 2014 at 22:42

Akinkunle Allen

1,30912 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lululala · Accepted Answer · 2014-04-20 23:09:51Z

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, 2014 at 23:09

lululala

111 bronze badge

1 Comment

HMR Over a year ago

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. stackoverflow.com/questions/16063394/…

Collectives™ on Stack Overflow

Constructor Based Inheritance in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related