javascript - EaselJS: Strange behaviours when extending Container class -

i'm trying extend container class strange behavior(at least strange me). i've created , item "class" in same manner it's done in createjs. i'm adding shape object when setvalue invoked. here 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 html perform following operations. create 2 objects , expect each of them create 1 child item of different color. result each item instance contains 2 shapes , both item object looking identical. when change position of "bg" shape of second object, changes in first item object 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 screenshot. i'm using latest createjs version. container class i'm trying extend here.

this weird way extend classes, really. had same issues extending stuff in createjs. wouldn't recommend use createjs.extend method. here's better way of extending things (the 1 use createjs), hope helps:

// class inheritance helper // may called before or after define childclass' prototype var _extends = function(childclass, parentclass) {     var f = function() { };     f.prototype = parentclass.prototype;      // copy child prototype methods in case there defined     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 can extend createjs

var mycontainer = function() {     // don't forget call '_super' methods, otherwise you'd overwrite them     this._super.constructor.call(this);     // smth later on     this.bg = new createjs.shape(); } // ... can extend or later on, after done class mycontainer.prototype.createbg = function(color) {     this.bg.graphics.beginfill(color).drawroundrect(-50/2,-50/2,50,50,4);     this.addchild(bg); } // extend 'container' _extends(mycontainer, createjs.container);