Dlaczego warto używać Ext.apply w initComponent

Question

Wiele przykładów kodu używa Ext.apply podczas ustawiania właściwości komponentu w metodzie initComponent.

Przykład:

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

Moje pytanie brzmi, jaka jest różnica robi to w ten sposób, w porównaniu do robi to w ten sposób:

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

Dla mnie wydaje się bardziej czytelny w ten sposób. Ale czy brakuje mi czegoś, co dostaję od Ext.apply?

Answer 1

Ext.apply() służy do uproszczenia kopiowania wielu właściwości ze źródła do obiektu docelowego (przez większość czasu obiekt źródłowy i docelowy mają różne zestawy właściwości) i może być dodatkowo stosowany do stosowania wartości domyślnych (trzeci argument).

Zauważ, że nie zrobi głębokich klonów! Znaczenie, jeśli masz tablicę lub obiekt jako wartość właściwości, to zastosujesz odniesienie!

Istnieje również applyIf(), który kopiuje tylko właściwości, które jeszcze nie istnieją w obiekcie docelowym. W niektórych przypadkach obydwie implementacje mają także tę zaletę, że zrzucają odwołanie skopiowanego obiektu.

Uwaga: Twój drugi sposób nie zadziała, ponieważ brakuje Ci this.

Answer 2

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

nie zainicjować coś, to znaczy

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

który robi to samo jak twój przykład stosując Ext.apply. Ale Ext.apply pokazuje swoją moc w bardziej złożonych przypadkach, np.

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} 

Jest to często używane do nadpisania domyślnych opcji komponentów o podanych parametrach inicjalizacyjnych.