javascript - EaselJS:扩展 Container 类时的奇怪行为

Question

我正在尝试扩展 Container类，但我得到一些奇怪的行为(至少对我来说很奇怪)。我以与 createjs 中相同的方式创建了 Item“类”。我在调用 setValue 时添加一个形状对象。这是 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);