Question

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

该行＆＃39; this.Sprite_initalize（playerSpriteSheet）;＆＃39;导致错误＆＃39; Uncaught TypeError：undefined不是函数。我在这里正确使用原型吗？

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;

}

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

详细描述了一般模式in this other answer。

Object.create是一个ES5功能，但是如果你必须支持非常老的引擎（比如IE8中的引擎），那么上面使用的单参数版本可以是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
    };
}

未捕获的TypeError，是使用原型的新手

1 个答案: