Javascript 在initComponent Ext JS4中声明函数
我正在使用ExtJS4进行一个项目。在我们的一些类中,我们在initComponent函数中声明函数,然后可以将其设置为控件的处理程序。我将在下面举一个例子。忽略类中的大部分内容,关键的细节是处理程序在initComponent中声明并设置为按钮的处理程序 现在,这实际上是可行的——这里的问题就是为什么这是可行的。我对JavaScript相当陌生,但我认为函数中声明的任何变量或函数在该函数完成后都会被销毁。这是不对的吗?我很欣赏可能有一个更好的编码风格,但我真的想让我的头在这之前,我考虑改变负荷的类。课程内容如下。。。一些评论指出了关键领域Javascript 在initComponent Ext JS4中声明函数,javascript,function,scope,extjs4,declare,Javascript,Function,Scope,Extjs4,Declare,我正在使用ExtJS4进行一个项目。在我们的一些类中,我们在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
]
}
]
}
]
}
]
}
]
});
}
});
对于基本变量(如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”对象,该对象被呈现到文档的页面,因此所有附加对象和引用对象都是活动的