[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類的方法