2012-12-03 11:55 8322人阅读 收藏 举报
EXTJS中的类继承
1人收藏此文章, 我要收藏发表于5个月前(2012-06-12 20:52) , 已有731次阅读 ,共0个评论
最近在用extjs,一直不理解superclass.constructor.call这个用法。
javascript中类的继承机制如下,有一个baseClass的类,然后为其定义两个方法,someMethod()和overwriteMethod()
1
var
BaseClass =
function
(){
2
3
};
4
BaseClass.prototype.someMethod =
function
(){
5
6
};
7
BaseClass.prototype.overridenMethod =
function
(){
8
9
};
对于Extjs的类的继承,有几个函数需要注意一下
Ext.apply(obj, config, [defaults]) 将config对象的所有属性都复制到另一个对象obj上,第三个参数defaults可以用来提供默认值,不过通常指用前两个参数就够了。这个函数主要用在构造函数中,用来将配置复制到对象上。
Ext.applyIf(obj, config) 和Ext.apply的功能类似,唯一不同的是,这个函数只会将config对象中有,而obj对象中没有的属性复制到obj上。
Ext.extend(subclass, superclass, [overrides]) 用来继承已有的类
对于类的继承有几下几种方式:
1 javascript实现类的继承
01
var
SubClass =
function
(){
02
BaseClass.call(
this
);
03
};
04
SubClass.prototype =
new
BaseClass();
05
SubClass.prototype .newMethod =
function
(){
06
07
};
08
SubClass.prototype.overridenMethod =
function
(){
09
10
};
2使用EXTjs的extend()函数
1
var
SubClass =
function
() {
2
SubClass.superclass.constructor.call(
this
);
3
};
4
Ext.extend(SubClass, BaseClass, {
5
newMethod :
function
() {},
6
overriddenMethod :
function
() {}
7
};
3 extjs中替换constructor
01
02
SubClass = Ext.extend(BaseClass, {
03
initComponent :
function
(){
04
05
Ext.Container.superclass.initComponent.call(
this
);
06
07
this
.addEvents({
08
09
});
10
}
11
}
Ext.extend()函数提供了直接访问父类构造函数的途径,通过 SubClass.superclass.constructor.call(this);就可以直接调用父类的构造函数,这个函数的第一个参数总是 this,以确保父类的构造函数在子类的作用域里工作。
如果父类的构造函数需要传入参数,可以讲所需的参数直接传递给它: SubClass.superclass.constructor.call(this,config);这样就得到了一个继承了父类的所有属性和函数的子类。
下面是一个完整的类继承的例子
01
SuperClass=
function
(){
02
}
03
SuperClass.prototype.AA=
function
(){
04
alert(
'aa'
);
05
}
06
07
SubClass=
function
(){
08
SubClass.superclass.constructor.call(
this
);
09
}
10
Ext.extend(SubClass,SuperClass,{
11
BB:
function
(){alert(
'新方法'
);},
12
AA:
function
(){alert(
'重写方法'
);}
13
}
14
);
15
16
var
sub=
new
SubClass();
17
sub.AA();
18
sub.BB();
结果是alert出重写方法,和新方法。
/**
* 12.11.12
*/
这里补充一个稍微复杂的例子,以下是两种不同的继承方式
01
IDB.WebsqlConsole = Ext.extend(IDB.MyTabPanel, {
02
initComponent:
function
() {
03
this
.databasePanel =
new
Ext.Panel({title:
'标题1'
});
04
this
.tabPanel =
new
Ext.Panel({title:
'标题2'
})
05
this
.sqlConsole =
new
Ext.Panel({title:
'标题3'
});
06
Ext.apply(
this
, {
07
items:[
08
this
.databasePanel ,
this
.tabPanel ,
this
.sqlConsole
09
],
10
getDatabasePanel:
function
() {
11
return
this
.databasePanel;
12
}
13
});
14
IDB.WebsqlConsole.superclass.initComponent.call(
this
);
15
}
16
});
1
IDB.ConsoleManager =
function
() {
2
IDB.ConsoleManager.superclass.constructor.call(
this
, {
3
items:[
new
Ext.Panel({title:
'标题1'
})]
4
});
5
};
6
Ext.extend(IDB.ConsoleManager, IDB.MyTabPanel)
总结一下,对于EXTjs来说,有一个base类,子类使用extend来继承base类,extend有三个参数,第一个是子类即this,第二个参数是base类,第三个参数是config。另外子类在构造的时候使用subclase.superclass.construtor.call(this);来构造。