在 Ext JS 构造函数中将项目推入数组会产生多个项目

2024-05-08

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

这看起来很奇怪,因为我希望类的定义被用作一种模板,所以每个新类都会从头开始。看来这不是真的,所以我认为这与基元与对象有关,但我不完全确定原因。 Ext JS 这样做背后的技术解释是什么?没有this在构造函数中引用该特定实例,而不是实际的类定义?

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

这是一个.

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) 的说法煎茶论坛 https://www.sencha.com/forum/showthread.php?335337,这是由于原型继承造成的。这意味着,添加到类定义中的任何属性都被视为添加到对象的原型中。结合对象通过引用传递的事实,当我们添加到数组时,它会在类的原型上更新并用于创建下一个实例。它类似于以下示例:

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 正在考虑它(根据此所以答案 https://stackoverflow.com/questions/22528967/es6-class-variable-alternatives/22986568#22986568).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Ext JS 构造函数中将项目推入数组会产生多个项目 的相关文章

随机推荐