在initComponent中聲明函數Ext JS4

Question

我正在使用Ext JS4處理項目。在我們的一些類中，我們在initComponent函數內部聲明函數，然後可以將它們設置爲控件的處理程序。我將在下面列舉一個例子。忽略大部分類中的內容，關鍵細節是Handlers在initComponent中聲明並設置爲按鈕的處理程序。

現在，這實際上是工作 - 這裏的問題是爲什麼這個工程。我對JavaScript相當陌生，但我認爲一旦函數完成後，在函數中聲明的任何變量或函數都會被銷燬。這是不正確的？我很欣賞這可能會有更好的編碼風格，但在考慮更改類的負載之前，我真的很想在這個問題上得到解決。這個班級如下...一些評論確定了關鍵領域。

Ext.onReady(function() { 
    Ext.application({ 

     name: 'Form2', 
     thisForm: {}, 

     launch: function() { 
      thisForm = Ext.create('Form2', {}); 
     } 
    }); 
}); 

Ext.define('Form2', { 
    extend: 'Ext.form.Panel', 
    layout:'border', 

    config: { 
     controlManager: {}, 
     formVariables: {}, 
     dataHelper:  {} 
    }, 

    constructor: function() { 
     var me = this; 

     ... 
     ... 

     // Initialize the form - I know, this might not be the be best coding style here. 
     me.initComponent(); 
    }, 

    initComponent: function() { 

    Ext.QuickTips.init(); 

    var ButtonControl1 = this.controlManager.createButton('ButtonControl1'); 

    var ButtonControl2 = this.controlManager.createButton('ButtonControl2'); 

    ... 
    ... 

    // Handler for Btton1 - **I'm not using the var keyword in this declaration** 
    function Handler1() { 
     alert('This Works!'); 
    }; 

    // Handler for Btton2 - **I'm using the var keyword in this example** 
    var Handler2 = function() { 
     alert('This Works also!'); 
    }; 

    // THIS IS THE KEY PART OF THIS QUESTION - even though the handler functions are declared 
    // locally (above), clicking the buttons will still execute these. Do the functions 
    // still exist by chance, and will be garbage collected at some later time, or are they 
    // actually quaranteed to be there. I'm confused! 

    ButtonControl1.onClickEventHandler = function() {Handler1();}; 

    ButtonControl2.onClickEventHandler = function() {Handler2();}; 

    // Don't need to worry about this part. 

    Ext.create('Ext.container.Viewport', { 
     layout:'border', 
     style: { position:'relative' }, 
     defaults: { 
      collapsible: true, 
      split: true, 
      bodyStyle: 'padding:0px' 
     }, 
      items: [ 
       { 
         collapsible: false, 
       split: false, 
        region: 'north', 
        height: 50, 
        margins: '0 2 0 2', 
        bbar: '', 
        items: [ ] 
       }, 
       { 
        collapsible: false, 
        split: false, 
        region:'west', 
        margins: '0 0 0 0', 
        cmargins: '0 2 0 2', 
        width: 0, 
        lbar: [ ] 
       }, 
       { 
        collapsible: false, 
        region:'center', 
        margins: '0 2 0 2', 
        layout: { 
         align: 'stretch', 
         type: 'hbox' 
        }, 
        items: [ 
         { 
          xtype: 'form', 
          fileUpload: true, 
          layout: { 
           align: 'stretch', 
           type: 'vbox' 
          }, 
          flex: 1, 
          items: [ 
          { 
           xtype: 'container', 
           height: 550, 
           layout: { 
            align: 'stretch', 
            type: 'hbox' 
           }, 
           items: [ 
           { 
            xtype: 'container', 
            width: 570, 
            layout: 'vbox', 
            padding: '5 0 0 0', 
            style:'background-color:rgb(255, 255, 255);', 
            items: [ 
             ButtonControl1, ButtonControl2 
            ] 
           } 
           ] 
          } 
          ] 
         } 
        ] 
       } 
      ] 
     }); 
    } 
}); 

Answer 1

對於原始變量（如字符串或int），當函數完成時，其所有局部變量都被破壞。

對於非基元變量，本地創建的對象（例如數組或對象）不會在有任何其他對象引用時被破壞。

在你的例子中，ButtonControl1和ButtonControl2是在initComponent之外聲明的。

在initComponent函數內部，onClickEventHandler是Handler1和Handler2函數的處理函數引用。 當initComponent運行完成時，因爲ButtonControl1和ButtonControl2不在initComponent的範圍內（但在onReady函數的範圍內），所以它們仍然處於活動狀態，因此它們也是它們所引用的所有對象。

var ButtonControl1 = ....; // this global variable object 
var ButtonControl2 = ....; // this global variable object 

initComponent: function() { 

    function Handler1() { 
     ... 
    }; 

    var Handler2 = function() { 
     ... 
    }; 

    // ButtonControl1 and ButtonControl2 are declared outside of initComponent. 
    // Unless these variables will be distroyed, they keep onClickEventHandler references to Handler1 and Handler2 objects and therefore these objects will alive outside the scope of initComponent. 
    ButtonControl1.onClickEventHandler = function() {Handler1();}; 
    ButtonControl2.onClickEventHandler = function() {Handler2();}; 

} 

考慮onReady的範圍的最後一個功能是initComponent（即沒有定義的任何其它的事件處理程序）。 那麼爲什麼所有這些對象在initComponent完成後仍然保持活動？

答案被創建爲'Ext.container.Viewport'對象，該對象被呈現給文檔的頁面，因此所有連接的對象和引用對象也都處於活動狀態。