1

Ext JS4 を使用するプロジェクトに取り組んでいます。一部のクラスでは、initComponent 関数内で関数を宣言しています。これは、コントロールへのハンドラーとして設定できます。この例を以下に示します。クラスにあるもののほとんどを無視します。重要な詳細は、ハンドラーが 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
                                     ] 
                                 }
                                 ] 
                             } 
                             ] 
                         } 
                     ] 
                 } 
             ] 
         }); 
     } 
});
4

1 に答える 1

2

プリミティブ変数 (string や int など) の場合、関数が終了すると、すべてのローカル変数が破棄されます。

非プリミティブ変数の場合、ローカルに作成されたオブジェクト (配列や Ext オブジェクトなど) は、それに対する他のオブジェクト参照がある間は破棄されません。

あなたの例では、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」オブジェクトが作成されるため、添付されたすべてのオブジェクトと参照オブジェクトも同様に有効です。

于 2012-06-17T10:19:46.953 に答える