[ExtJS] 一文搞懂 apply 使用

在ExtJS的库中，常看到apply关键字。现在就简单介绍下apply在ExtJS用法

1.Ext.apply 和 Ext.applyIf

这里的apply是Ext的内置方法

 

apply （object，config，[defaults]）

将的所有属性复制config到指定的object（将config对象 完全复制到 object）

• object：  对象

属性的接收者。

• config：  对象

属性的主要来源。

• defaults：  默认值对象 （可选）

一个也将应用于默认值的对象。

使用例子：

Ext.apply({a:'1'}, {a: '2',b:'1'});
//输出 {a: "2", b: "1"}
Ext.apply({c:'3'}, {a: '2',b:'1'})
//输出 {c: "3", a: "2", b: "1"} 

Ext.apply:若object对象存在与 config对象同名的key，就用 config对象的属性值 覆盖掉object对象里的属性值

applyIf （object，config）

如果尚未将config的所有属性复制到对象，则将它们复制。

• object：  对象

属性的接收者。

• config：  对象

属性的主要来源。

 使用例子：

Ext.applyIf({a:'1'}, {a: '2',b:'1'})
//输出 {a: "1", b: "1"}
Ext.applyIf({c:'3'}, {a: '2',b:'1'})
//输出 {c: "3", a: "2", b: "1"}

Ext.applyIf：若 object对象中不含有 config对象的属性，就将其从config对象中复制过来

2.控件的apply使用

有时我们在开发中，想要自定义一些控件，这些控件里可能包含config配置项，config里又含有子组件，例如下面的例子：

Ext.define('A',{
    extend:'Ext.Container',
    xtype:'a',
    config:{
        child:{
            xtype:'textfield'
        }
    }
})

上述代码中，我们定义了一个A类，这个A类是个带有输入框的container容器，希望通过getChild()能获取到textfield 实例对象。

若是我们实例化一下，这个控件A：

var objA = Ext.widget('a');//实例化A类
objA.getChild();//访问自定义的子孩子
//输出 {}

 发现输出的是{}；

若我们在实例化时加上child配置项:

var objA = Ext.widget('a',{child:{xtype:'textfield'}});//实例化A类
objA.getChild();//访问自定义的子孩子
//输出 {xtype: "textfield"}

可以看到，输出的是个object对象，并不是我们想要的textfield的实例。

这个时候，就要用apply构造方法改造下A类：

Ext.define('A',{
    extend:'Ext.Container',
    xtype:'a',
    config:{
        child:{
            xtype:'textfield'
        }
    },
    applyChild(child) {
        if (child) {
            child = Ext.create(Ext.apply({}, child));//child是指child的配置项
        }else child = Ext.create(Ext.apply({}, {xtype: 'textfield'}));
        return child;
    }
})

在config里声明的属性，Extjs会帮助其生成 get和set访问器，详见 ExtJs config的使用，除此之外，还有apply方法

config:{
    aBC:''
}

就会有个

applyABC（） 和 updateABC（）方法

apply方法的基类，就是ExtJS的 Function类里的apply 

Function apply 

apply ( thisArg, argsArray )

使用apply，您可以编写一个方法，然后在另一个对象中继承它，而不必为新对象重写该方法。其他解释详见apply

• thisArg：  对象

为函数function调用提供的值。请注意，这可能不是该方法看到的实际值：如果该方法是非严格模式代码中的函数，则null和undefined将被全局对象替换，原始值将被装箱。

• argsArray：  数组

类似于object的数组，指定应调用fun的参数，如果不向函数提供任何参数，则为null或undefined。

 例子：

有个方法或者叫函数 Product ，里面有商品名 和 价格 以及一个显示方法

function Product(name, price) {
    this.name = name;
    this.price = price; 
    this.show = function() {
        console.log('价格是'+ price);
    }
}

此时若我们在其他地方 建了个食物的类，它也是商品，也想具有上面的属性，就可以用apply了

function Food(name, price) {
    Product.apply(this, arguments);
    this.category = 'food';
}

若此时我们实例化一下Food,

var cheese = new Food('feta', 5);

输出一下cheese

可以看到food类有product类的方法