在 Ext JS 构造函数中将项目推送到数组会导致多个项目

Question

我已经定义了一个 Ext JS 类。在这个类的constructor 中，我将一个文本字段推送到我的项目数组中，然后添加到我的测试字符串中。数组和字符串都在类定义中声明为空。但是，如果您尝试创建多个类实例，您会看到 items 数组在每个实例之间共享，但字符串不是。

这似乎很奇怪，因为我希望将类的定义用作一种模板，因此每个新类都将从头开始。看来这不是真的，所以我认为这与原语与对象有关，但我不完全确定为什么。 Ext JS 这样做背后的技术解释是什么？构造函数中的this 不是指那个特定的实例，而不是实际的类定义吗？

我不是在问如何解决这个问题...我知道怎么做（在 initComponent/constructor 中声明数组和对象）。我在问这背后的技术解释是什么。据我所知，这不是 ES6 类的行为方式，所以我假设这是由于 Ext JS 类系统的设计造成的。

这是example。

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.define('MyClass', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.myClass',
            items: [],
            border: true,
            myTestString: '',
            constructor: function(config) {
                this.items.push({
                    xtype: 'textfield',
                    fieldLabel: 'test'
                });
                this.myTestString += 'hi';
                this.callParent(arguments);
            }
        });
        var v = Ext.create('Ext.container.Viewport', {
            defaults: {
                xtype: 'myClass',
                listeners: {
                    afterrender: function(panel) {
                        console.log(panel.myTestString);
                    }
                }
            },
            items: [{
                title: 'One'
            }, {
                title: 'Two'
            }, {
                title: 'Three'
            }]
        });
    }
});

Answer 1

根据Sencha Forums 上的 Evan Trimboli 所说，这是由于原型继承。意思是，添加到类定义中的任何属性都被视为添加到对象的原型中。结合对象通过引用传递的事实，当我们添加到数组时，它会在类的原型上更新并用于创建下一个实例。类似于下面的例子：

function MyClass(item) {
  this.items.push(item);
}
MyClass.prototype.items = [];
var c1 = new MyClass(1);
var c2 = new MyClass(2);
console.log(c2.items);  // returns an array of [1, 2]

在 ECMAScript 6 中，类系统不允许类属性，但显然 ES7 正在考虑使用它（根据 SO answer）。