将项目推入Ext JS构造函数中的数组会导致多个项目 [英] Pushing items onto an array in Ext JS constructor results in multiple items

问题描述

我有一个已定义的Ext JS类.在此类的constructor中，我将文本字段压入我的items数组，然后将其添加到测试字符串中.数组和字符串在类定义中都声明为空.但是，如果尝试创建多个类实例，则会看到items数组在每个实例之间都是共享的，而字符串却不是.

I have an Ext JS class that I've defined. In this class's constructor, I push a textfield onto my items array, and I add to my test string. Both the array and string are declared as empty in the class definition. However, if you try and create multiple class instances, you'll see that the items array is shared across each instance, but the string is not.

这似乎很奇怪，因为我希望将类的定义用作一种模板，因此每个新类都将从头开始.看来这是不对的，所以我收集到这与原始对象与对象有关，但是我不确定为什么. Ext JS这样做背后的技术解释是什么?

This seems odd, as I would expect the definition of the class to be used as a sort of template, so then each new class, would start from scratch. It appears this is not true, so I gather this has something to do with primitives vs objects, but I'm not entirely sure why. What's the technical explanation behind Ext JS doing this? Doesn't this in the constructor refer to that particular instance, not the actual class definition?

我不是在问如何解决问题...我知道该怎么做(在initComponent/constructor内部声明数组和对象).我问这背后的技术解释是什么.据我所知，这不是ES6类的行为方式，所以我认为这是由于Ext JS类系统的设计所致.

I'm not asking how to fix the issue... I know how to do that (declare arrays and objects inside of initComponent/constructor). I'm asking what the technical explanation behind this is. From what I gather, this isn't how ES6 classes behave, so I'm assuming this is this due to the design of the Ext JS class system.

这是一个示例.

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'
            }]
        });
    }
});

推荐答案

根据Evan Trimboli在

According to Evan Trimboli over on the Sencha Forums, this is due to prototypal inheritance. Meaning, any properties added to a class's definition are treated like being added to the prototype of an object. Combined with the fact that objects are passed by reference, when we add to the array, it gets updated on the class's prototype and used in creating the next instance. It's similar to the following example:

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(为此

In ECMAScript 6, the class system does not allow class properties, but it apparently is being considered for ES7 (per this SO answer).

这篇关于将项目推入Ext JS构造函数中的数组会导致多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！