EaselJS：扩展Container类时的奇怪行为

Question

我正在尝试扩展Container课程但我得到一些奇怪的行为（至少对我来说很奇怪）。我创建和Item“class”的方式与在createjs中完成的方式相同。我在调用setValue时添加一个shape对象。这是Item类：

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

现在在html中我执行以下操作。我创建了2个对象，我希望每个对象创建一个不同颜色的子项。结果是每个项目实例包含2个形状，并且两个项目对象看起来都相同。当我改变第二个对象的“bg”形状的位置时，它也会改变第一个项目对象。

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


}

我附上了截图。我正在使用最新的createjs版本。我正在尝试扩展的Container类是here。

Answer 1

这真是一种非常奇怪的扩展类的方法。我在createjs中扩展内容时遇到了同样的问题。我甚至不建议你使用createjs.extend方法。 这是一个更好的扩展方法（我使用createjs的方法），希望它有所帮助：

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

以下是扩展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);

Answer 2

p.initialize = function() { this.Container_initialize(); // needs to be called };

应该理顺你所看到的行为。

希望有帮助...