为什么在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参数覆盖组件的默认选项。