Uncaught TyperError, new to using prototypes

Question

I can't seem to figure out why this doesn't work.

The line 'this.Sprite_initalize(playerSpriteSheet);' is causing the error 'Uncaught TypeError: undefined is not a function. Am I using prototypes correctly here?

function init() {
    canvas = document.getElementById("canvas");

    // Creates the stage
    stage = new createjs.Stage(canvas);

    // Loads the image for player
    imgPlayer.src = "img/player.png";

    // Create player and add to stage
    player = new Player(imgPlayer,300);

    stage.addChild(player);
}

function Player(imgPlayer, x_start,x_end){
    this.initialize(imgPlayer,x_start,x_end);
}
Player.prototype = new createjs.Sprite();
Player.prototype.alive = true;

// constructor
Player.prototype.Sprite_initialize = Player.prototype.initialize; //avoid overiding base class

Player.prototype.initialize = function (imgPlayer,x_end){
        var playerSpriteSheet = new createjs.SpriteSheet({
        // Sprite sheet stuff
            images: [imgPlayer],
            frames: [
                [0,0,26,26], //beginWalk0
                [26,0,26,26], //walk0
                [52,0,26,26], //walk1
                [78,0,26,26], //walk2
                [0,26,26,26], //stand0
                [26,26,26,26], //stand1
                [0,52,28,32], //jump0

            ],
            animations: {
                stand:{
                    frames:[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5],
                    speed:0.3
                },

                walk:{
                    frames:[1,2,3],
                    next:"walk",
                    speed:0.3
                },
                beginWalk:{
                    frames:[0],
                    next:"walk",
                },

                jump:{
                    frames:[6],
                },
            }
        });

    this.Sprite_initialize(playerSpriteSheet);
    this.x_end = x_end;

    // play stand sequence
    //this.gotoAndPlay("stand");
    this.isInIdleMode = true;
    this.name = "Player";
    // 1 = right & -1 = left
    this.direction = 1;

}

Try to put `Player.prototype.Sprite_initialize = Player.prototype.initialize;` after `Player.prototype.initialize` — jcubic, Jan 11 '15 at 18:19

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You're falling into quite a common error in setting up inheritance chains in JavaScript.

Any time you see

Foo.prototype = new Base();

...that's likely to be (though not guaranteed to be) wrong, at least when using normal constructor functions (there are other patterns).

Here's how you probably want to set up Player:

function Player(imgPlayer, x_start,x_end){
    createjs.Sprite.apply(this, arguments);                  // ** Change
    this.initialize(imgPlayer,x_start,x_end);
}
Player.prototype = Object.create(createjs.Sprite.prototype); // ** Change
Player.prototype.constructor = Player;                       // ** Change
Player.prototype.alive = true;

and then

Player.prototype.initialize = function (imgPlayer,x_end){
    // Very likely to want this call unless `createjs.Sprite` does it automatically
    createjs.Sprite.prototype.initialize.apply(this, arguments);

    // ...your code here...
};

The general pattern is described in detail in this other answer.

Object.create is an ES5 feature, but if you have to support really old engines (like the one in IE8), the single-argument version of it used above can be polyfilled:

if (!Object.create) {
    Object.create = function(proto, props) {
       if (typeof props !== "undefined") {
           throw "The two-argument version of Object.create cannot be polyfilled.";
       }
       function ctor() { }
       ctor.prototype = proto;
       return new ctor; // You can add () if you like, they're unnecessary, `new` calls the function
    };
}

Thank you! I've got it sorted! Cheers for the help :D – tama Jan 11 '15 at 19:54 — tama, Jan 11 '15 at 19:54

Uncaught TyperError, new to using prototypes

1 Answers1