Question

我从EASELJS库继承了一个对象。为了简化问题，我将代码缩减为最小形式。

我有一个班级：

this.TESTProg = this.TESTProg || {};

(function() {
    var _jsbutton = function(x, y, text, icon) {
        p.init(x, y, text, icon);
    };

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

    p.x = 0;
    p.y = 0;
    p.text = null;
    p.icon = null;

    p.init = function(x, y, text, icon) {
        this.x = 0 + x;
        this.y = 0 + y;
        this.text = "" + text;
        this.icon = null;
    };

    TESTProg._jsbutton = _jsbutton;
})();

然后我在另一个js对象中使用它：

    var buttoncancel = new SJSGame._jsbutton(
            profileselConfig.cancelx,    //this is defined in another jsfile:
            profileselConfig.cancely,
            "cancel", "_cancel.png");

    console.log( buttoncancel.y );  //this gives 240

    var buttoncancel2 = new SJSGame._jsbutton(
            profileselConfig.cancelx,
            profileselConfig.cancely - 40,
            "cancel", "_cancel.png");

    console.log( buttoncancel.y );    //this gives 200
    console.log( buttoncancel2.y );   //this gives 200

    buttoncancel2.y = 100;
    console.log( buttoncancel.y );    //this now gives 200 (not changed by the second object)
    console.log( buttoncancel2.y );   //this now gives 100

配置文件：

var _profileselConfig = function(){
    this.cancelx = 0;
    this.cancely = 240;
};

profileselConfig = new _profileselConfig();

我做错了什么？

我已经使用0 +来避免传递引用并且它无法正常工作。我现在应该怎么做？有什么建议？感谢。

Answer 1

您可能应该在构造函数中调用this.init而不是p.init。

当您致电p.init时，this内的init会引用原型。因此，每当您创建实例时，p.init调用都会修改所有 _jsbutton个对象的原型。

这就是为什么两个按钮具有相同的x / y值：它们都从相同的原型中获取它们的位置，并且最后运行的构造函数设置原型值。当您在构造函数外部设置buttoncancel2.y时，您为该实例提供了自己的y属性，因此它不再使用共享原型值。

如果您在构造函数中调用this.init，则this中的init将引用您新创建的实例。实例将不再使用x，y，text和icon的共享原型值。

旁注：“我已经使用0 +来避免传递引用” - 这不是必需的，因为原始类型总是被复制。

Javascript对象成员变量没有克隆

1 个答案: