为什么在initComponent中使用Ext.apply

Question

在initComponent方法中为组件设置属性时,许多代码示例都使用Ext.apply.

示例:

    initComponent: function(){
        Ext.apply(this, {
            items: {
                xtype: 'button'
            }
    })},

我的问题是,与这样做相比,这样做有什么不同:

    initComponent: function(){
        this.items = {
            xtype: 'button'
        }
    }

对我来说,它似乎更具可读性.但是我错过了从Ext.apply获得的东西吗？

Answer 1

Ext.apply() 用于简化从源到目标对象的许多属性的复制(大多数情况下源和目标对象具有不同的属性集),并且它还可以用于应用默认值(第三个参数).

请注意,它不会产生深度克隆!这意味着如果您将数组或对象作为属性值,它将应用引用!

还有一个applyIf()只复制目标对象中尚不存在的属性.在某些情况下,两种实现都具有删除复制对象的引用的好处.

注意:你的第二种方式不起作用,因为你错过了this.

Answer 2

initComponent: function(){
    items = {
        xtype: 'button'
    }
}

你的意思是,不会初始化任何东西

initComponent: function(){
    this.items = {
        xtype: 'button'
    }
}

这与使用Ext.apply的示例相同.但Ext.apply在更复杂的情况下展示了它的力量,例如

var x = {a: 1, c:3, e:5};
Ext.apply(x, {b:2, d:4, f:6});

console.log(x); // Object {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

这通常用于使用给定的init参数覆盖组件的默认选项.