이미 다른 클래스에서 상속 한 클래스를 확장 할 수 있습니까?

Question

나는 직접적인 대답은 여기 없다고 알고 있지만, 가능하다고 생각하는 부부와 이야기를 나눴습니다. 여기 내 코드는 다음과 같습니다.

var Tile = function(xPos, yPos, state) { 
    this.createTile(xPos, yPos, state); 
} 

Tile.prototype = new createjs.Shape(); 

Tile.prototype.createTile = function(xPos, yPos, state) { 
    // debugger; 
    this.x = xPos; 
    this.y = yPos; 
    this.onState = state; 

    var fillCommand = this.graphics.beginFill("#969696").command; 
    var shapeCommand = this.graphics.drawRoundRect(0, 0, 50, 50, 10).command; 

    this.on("click", function(){this.toggleState(fillCommand);}); 

    stage.addChild(this); 
    stage.update(); 
} 

Tile.prototype.toggleState = function(fillCommand) { 
    if (this.onState === true) { 
     fillCommand.style = "#969696"; 
     stage.update(); 
     this.onState = false; 
     } else if (this.onState === false) { 
     fillCommand.style = "#000000"; 
     stage.update(); 
     this.onState = true; 
    } 
} 

누구나 익숙하다면 Shape()가 easeljs에 구현됩니다. 기본적으로 여기에 Tile 클래스를 만들어서 눌렀을 때 색상이 바뀌는 작은 둥근 사각형을 나타냅니다. 구문 - 현명한 웹 페이지에 아무것도 표시되지 않습니다. 이미 타일을 호출하고 캔버스가 이미 설정되어있는 올바른 코드가 있거나이 코드도 여기에 넣습니다. 내가 여기서 묻는 것은,이 구현에서 올바른 생각을 가지고 있는가?

Answer 1

다소 개성이 없지만 그것이 효과가 있다면 당신에게 더 많은 힘을줍니다. 모양에서 상속하는 일반적인 방법은 자바 스크립트에서

Tile.prototype = Object.create(createjs.Shape.prototype); 
Tile.prototype.constructor = Tile; 

상속과 같은 일을 할 것입니다 당신이 깊은 토끼 구멍 아래로 이동하는 시간과 에너지를하지 않는 한, 난 그냥 고집 추천 할 것입니다, 그래서 조금 이상하다 무슨 일이야. 더 읽기를 좋아한다면이 기사를 통해 시작해 보겠습니다. http://ejohn.org/blog/simple-javascript-inheritance/

Answer 2

여기 EaselJS 기고자가 - 당신은 절대적으로 EaselJS 클래스를 확장 할 수 있습니다. 실제로는 tutorial on the EaselJS site이 있습니다. 다른 사람들이 언급했듯이 자바 스크립트 상속은 고통스럽고 반드시 최선의 접근법 일 필요는 없습니다. 예를 들어, 나는 항상 모양/스프라이트를 상속하지 않고 작성합니다. 그러나 이젤은 완전히 가능합니다. 이서엘 지에는 EventDispatcher > DisplayObject > Bitmap을 살펴보십시오.

예를 들어, 초기화를 무시하고 수퍼 클래스 버전이 호출되는지 확인하는 튜토리얼의 접근법을 사용해야 할 것입니다. 약간 더러 웠지 만 EaselJS 0.7.1 (최신 릴리스)까지 광범위하게 사용되었습니다. .

새로운 방법 더 나은하지만

의 최신 버전 CreateJS (GitHub에서 NEXT 버전으로 만 사용 가능하며 곧 CDN에 태그를 지정하고 게시해야합니다!) 상속을위한 새로운 모델이 훨씬 쉽습니다. 자동으로 수퍼 메소드 삽입과 같은 작업을 수행합니다. 슈퍼 생성자.

function MyClass(arg) { 
    this.EventDispatcher_constructor(); 
    this.doSomethingWith(arg); 
} 
var p = createjs.extend(MyClass, createjs.EventDispatcher); 

// Add new methods 
p.doSomethingWith = function() { 
    // whatever 
} 

// Override methods 
p.addEventListener = function(name, listener) { 
    this.EventDispatcher_addEventListener(name, listener); 
    // custom stuff here 
} 

// Promote super class methods to MyClass 
window.MyClass = createjs.promote(MyClass, "EventDispatcher"); 

이 방법은 사용하기가 쉽고 청소기가 잘 작동합니다.

도움이 되길 바랍니다. :)