Uncaught TyperError, 프로토 타입을 처음 사용하는 경우

Question

이것이 작동하지 않는 이유를 알 수없는 것 같습니다.

줄 'this.Sprite_initalize (playerSpriteSheet);' 'Uncaught TypeError : undefined is not a function.'오류가 발생했습니다. 프로토 타입을 올바르게 사용하고 있습니까?

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

자바 스크립트에서 상속 체인을 설정하는 데 꽤 일반적인 오류가 발생합니다.

때마다 당신은, 적어도 보통의 생성자 함수를 사용하는 경우 (다른 패턴이있다) 그 잘못 (보장은 아니지만)이 될 가능성이 높습니다 ...

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