Question

我有一个我已定义的Ext JS类。在这个班级的constructor中，我将一个文本字段推送到我的items数组中，然后添加到我的测试字符串中。数组和字符串都在类定义中声明为空。但是，如果您尝试创建多个类实例，您将看到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

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

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）。

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

1 个答案: