EaselJS: Strange behaviours when extending Container class

Question

I'm trying to extend the Container class but I get some strange behavior(at least strange for me). I've created and Item "class" in the same manner it's done in createjs. I'm adding an shape object when the setValue is invoked. Here is the Item class:

this.test = this.test||{};

(function() {
    "use strict";

var Item = function() {
  this.initialize();
};

var p = Item.prototype = new createjs.Container();


        p.initialize = function() {

        };


        p.setValue = function(color){

            if (this.hasOwnProperty("bg"))
                this.removeChild(this.bg);
            this.bg = new createjs.Shape();
            this.bg.graphics.beginFill(color).drawRoundRect(-50/2,-50/2,50,50,4);
            this.addChildAt(this.bg);

        };

        p.getValue = function(){
            return this.value;
        };

test.Item = Item;
}());

Now in the html I perform the following operations. I create 2 objects and I expect each of them to create one child Item of different color. The result is that each item instance contains 2 shapes and both item object are looking identical. When I change the position of the "bg" shape of the second object, it is changes in the first item object as well.

function init() 
{
    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick", stage);

        var item1 = new test.Item();
        stage.addChild(item1);
        item1.setValue("#555555");
        item1.x = 50;
        item1.y = 50;

        var item2 = new test.Item();
        stage.addChild(item2);
        item2.setValue("#999999");
        item2.x = 300;
        item2.y = 50;

        item2.bg.x += 10;
        item2.bg.y += 10;

        stage.update();


}

I've attached an screenshot. I'm using the latest createjs version. The Container class I'm trying to extend is here.

Answer 1

This is a really weird way to extend classes, really. I had same issues with extending stuff in createjs. Also i wouldn't even recommend you use createjs.extend method. Here's a much better way of extending things (the one i use with createjs), hope it helps:

// class inheritance helper
// may be called before or after you define the childclass' prototype
var _extends = function(ChildClass, ParentClass)
{
    var f = function() { };
    f.prototype = ParentClass.prototype;

    // copy child prototype methods in case there are some defined already
    for(var m in ChildClass.prototype)
    {
        f.prototype[m] = ChildClass.prototype[m];
    }

    ChildClass.prototype = new f();
    ChildClass.prototype.constructor = ChildClass;
    ChildClass.prototype._super = ParentClass.prototype;        
};

Here's how you can extend createjs

var MyContainer = function()
{
    // don't forget to call the '_super' methods, otherwise you'd overwrite them
    this._super.constructor.call(this);
    // do smth with it later on
    this.bg = new createjs.Shape();
}
// ... you can extend now or later on, after you are done with your class
MyContainer.prototype.createBg = function(color)
{
    this.bg.graphics.beginFill(color).drawRoundRect(-50/2,-50/2,50,50,4);
    this.addChild(bg);
}
// now extend 'Container'
_extends(MyContainer, createjs.Container);