Is it possible to extend a class that already inherits from another class?

Question

I know the direct answer is no here but I've spoken with a couple people who seem to think it's possible. Here is my code:

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() is implemented in easeljs if anyone is familiar with it. Basically here I'm creating a Tile class to represent little rounded squares that will change color when they're pressed. Syntax-wise I get no errors nothing displays on the web page. I already have the correct code to call Tile and the canvas already set up or I'd put that code here too. What I'm asking here is, do I have the right idea in this implementation?

Answer 1

Its a little unconventional but if it works for you then more power to you. The more common way to inherit from Shape would be doing something like

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

Inheritance in Javascript is a little strange so, unless you have the time and energy to go down a deep rabbit hole, I would recommend just sticking with what's working. If you do feel like reading more this is a great article to get you started: http://ejohn.org/blog/simple-javascript-inheritance/

Answer 2

EaselJS contributor here - you can absolutely extend EaselJS classes. There is actually a tutorial on the EaselJS site for it. As other people have mentioned, JavaScript inheritance is kind of a pain, and not necessarily the best approach (for example, I always compose shapes/sprites instead of inheriting from them. But it is totally possible, just look at the EaselJS hierarchy: EventDispatcher > DisplayObject > Bitmap.

With your example, you should probably use the approach in the tutorial, where you override initialize, and ensure the superclasses version is called. Its a little dirty, but used extensively until EaselJS 0.7.1 (the latest release).

The New Way

Even better though, the latest version of CreateJS (only available in GitHub as the NEXT version, which should be tagged and published to the CDN soon!) has a brand new model for inheritance that is even easier, and does things like automatically injecting super methods, including the ability to call the super constructor.

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");

This is way cleaner, easier to use, and in our tests works great!

Hope that helps :)