Question

我从基类扩展了2个类 Class1扩展了BaseClass Class2扩展了BaseClass 我创建1和2的实例。
当我提醒Class2的数组内容时，我也得到了第一个数组的内容。

Ext.onReady(function () {
   var c1 = Ext.create('Child1Class');    
   var c2 = Ext.create('Child2Class');
   alert(c2.someArray.join());  
   //actual result: "BaseClass text ,Class1 text,Class2 text"
   //expected :"BaseClass text ,Class2 text"
});


Ext.define('BaseClass', {
    someArray: ["BaseClass text "],
});

Ext.define('Child1Class', {
    extend : 'BaseClass',
    constructor : function(){
        this.someArray[this.someArray.length] = "Class1 text";
    }
});

Ext.define('Child2Class', {
    extend : 'BaseClass',
    constructor : function(){
        this.someArray[this.someArray.length] = "Class2 text";
    }
});

为什么Class1参与此输出？

Answer 1

someArray是BaseClass原型的属性。 Prototype的属性在子类和实例之间共享。要避免此结果，请从构造函数声明数组。请考虑以下场景，它是您的简化版本：

function Class() {}
Class.prototype.array = [];

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // ["a"]

实际上，这与此非常接近：

var array = [];
var c1 = { array: array };
var c2 = { array: array };
c1.array === c2.array; // true

现在，让我们使用构造函数：

function Class() {
    this.array = [];
}

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // []

这种情况也可以简化：

var c1 = { array: [] };
var c2 = { array: [] };
c1.array === c2.array; // false

Answer 2

那是因为它是相同的数组。您可以为每个实例创建一个新数组，例如this：

Ext.onReady(function () {
    var c1 = Ext.create('Child1Class');
    var c2 = Ext.create('Child2Class');

    alert(c2.someArray.join());
});

Ext.define('BaseClass', {
    constructor: function (config) {
        this.callParent(arguments);

        Ext.apply(this, {
            someArray: ["BaseClass text "],
        });
    }
});

Ext.define('Child1Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class1 text";
    }
});

Ext.define('Child2Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class2 text";
    }
});

Extjs在简单类之间共享数组

2 个答案: