未捕获的TyperError，使用原型的新手

Uncaught TyperError, new to using prototypes

本文关键字：原型新手 TyperError 更新时间：2023-09-26

我似乎无法弄清楚为什么这不起作用。

这句话。Sprite_initalize（playerSpriteSheet）;"导致错误"未捕获类型错误：未定义不是函数。我在这里正确使用原型了吗？

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;
}

你在JavaScript中设置继承链时遇到了一个非常常见的错误。

任何时候你看到

Foo.prototype = new Base();

。这可能是（尽管不能保证）错误的，至少在使用普通构造函数时（还有其他模式）。

以下是您可能希望如何设置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;

然后

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...
};

一般模式在另一个答案中详细描述。

Object.create是 ES5 的一个功能，但如果你必须支持非常旧的引擎（比如 IE8 中的引擎），上面使用的单参数版本可以填充：

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
    };
}