JavaScript inheritance, superclass identifier in subclass is not defined, even though it is

Question

I'm currently in the process of writing a javascript game and I'm trying to take advantage of inheritance for the object structure, with a base GameObject that all objects inherit from. However, I keep coming up against strange behaviour.

While the GameObject works fine, when its invoked by a subclass it tells me that some of its members or members of objects I pass through the constructor, are not defined, even though they are. Note, I'm also using pixi.js engine. Specifically what's happing is I'm passing a sprite to the super class GameObject, and its telling me that the position member of that sprite, is not defined.

This breaks the inheritance and the subclass is no longer an instance of the super class. The two classes are shown below. I don't think this is a fault of the pixi engine, rather some syntax mistake on my end. Unfortunately I'm baffled at what could be going wrong. Also note that each class is in a separate js file.

I would like to know why its behaving like this, and how to fix it.

GameObject :

function GameObject(x_, y_, width_, height_, actor, stage) {
    this.actor = actor;
    var position = { x : x_, y : y_ }; //because I want the position data to be private
    var size = { width : width_, height : height_ };

    this.actor.position.x = position.x; //this is where it throws the reference error
    this.actor.position.y = position.y;

    this.actor.width = size.width;
    this.actor.height = size.height;

    stage.addChild(this.actor);

    this.GetPosition = function() {
        return position;
    }

    this.SetPosition = function(x, y) {
        position.x = x;
        position.y = y;

        this.actor.position.x = position.x;
        this.actor.position.y = position.y;
    }

    this.GetSize = function() {
        return size;
    }   

    this.SetSize = function(x, y) {
        size.x = x;
        size.y = y;

        actor.width = size.x;
        actor.height = size.y;
    }

    var collisionGroup = -1;
    this.SetCollisionGroup = function(index) {
        collisionGroup = index;
    }
    this.GetCollisionGroup = function() {
        return collisionGroup;
    }
}

subclass inheriting from GameObject :

FlappyBird.prototype = new GameObject();
FlappyBird.prototype.constructor = FlappyBird;

function FlappyBird(stage) {    
    GameObject.call(this, 50, 50, 50, 50, PIXI.Sprite.fromFrame("flappy01.png"), stage); //inherits from the game object

    console.log(this instanceof GameObject);
    console.log(this instanceof FlappyBird);
}

Answer 1

When you're invoking the GameObject function here:

FlappyBird.prototype = new GameObject();

...you're not passing any arguments, so clearly the members, like actor, that expect those arguments will have the value undefined. So this.actor.position will fail with a TypeError.

A better approach would be to do this:

FlappyBird.prototype = Object.create(GameObject.prototype);

...since the per-instance stuff shouldn't be needed on the FlappyBird.prototype.

---

Code in the question was updated.

And this is obviously going to be a problem since you're going to have infinite recursion.

function FlappyBird(stage) {
    // vv---Will infinitely recurse
    FlappyBird.call(this, 50, 50, 50, 50, PIXI.Sprite.fromFrame("flappy01.png"), stage); //inherits from the game object

    console.log(this instanceof GameObject);
    console.log(this instanceof FlappyBird);
}

You probably meant to call GameObject instead

function FlappyBird(stage) {
    // vv---Applies the `GameObject` constructor to the `FlappyBird` object.
    GameObject.call(this, 50, 50, 50, 50, PIXI.Sprite.fromFrame("flappy01.png"), stage); //inherits from the game object

    console.log(this instanceof GameObject);
    console.log(this instanceof FlappyBird);
}