如何在定義不使用initComponent時使用變量ExtJs

Question

定義1面板時我有一個問題。

練習1：

Ext.define('AppTest.view.AppMain', { 
extend: 'Ext.panel.Panel', 
xFile: "File", 
    // Init 
    initComponent: function() { 
     Ext.apply(this, { 
      items: [ 
       { 
        xtype: 'button', 
        action: 'file', 
        text: this.xFile // Using variable here 
       } 
      ] 
     }); 
     this.callParent(); 
    } 
}); 

練習2：

Ext.define('AppTest.view.AppMain', { 
    extend: 'Ext.panel.Panel', 

    xFile: "File", 
    items: [ 
     { 
      xtype: 'button', 
      action: 'file', 
      text: this.xFile // Using variable at here 
     } 
    ] 
}); 

當我運行第二個例子，只有例1創建 「文件」 按鈕的文字，例2只創建按鈕，但「文件「不是按鈕的文字。

請幫我解釋一下define這兩種方式的區別，以及如何使用例子2仍然使用this.xFile。

Answer 1

這是因爲javascript關閉。在第一個示例中，this關鍵字指的是已定義的對象。 （這裏是你的類實例）。簡而言之，你應該找到最接近的函數包裝器（這裏是initComponent）。

但在你的第二個例子中，this指的是window對象，它沒有xFile屬性。所以它返回null。對於測試把在第二個例子中的頂部下面一行，看到的結果：

this.xFile = 'hello!'; 

最後，我強烈建議你在部門有關closures和prototypes在JavaScript編碼複雜的腳本之前閱讀。