EXTJS中的类继承
来源:互联网 发布:嗟乎大丈夫当如此也 编辑:程序博客网 时间:2024/05/20 20:21
转载之处:http://blog.csdn.net/alastormoody/article/details/8251018
最近在用extjs,一直不理解superclass.constructor.call这个用法。
javascript中类的继承机制如下,有一个baseClass的类,然后为其定义两个方法,someMethod()和overwriteMethod()
1
var
BaseClass =
function
(){
2
//do something
3
};
4
BaseClass.prototype.someMethod =
function
(){
5
//do something
6
};
7
BaseClass.prototype.overridenMethod =
function
(){
8
//do something
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
//do something
07
};
08
SubClass.prototype.overridenMethod =
function
(){
09
//do something
10
};
1
var
SubClass =
function
() {
2
SubClass.superclass.constructor.call(
this
);
3
};
4
Ext.extend(SubClass, BaseClass, {
5
newMethod :
function
() {},
6
overriddenMethod :
function
() {}
7
};
01
// initComponent replaces the constructor:
02
SubClass = Ext.extend(BaseClass, {
03
initComponent :
function
(){
04
// call superclass initComponent
05
Ext.Container.superclass.initComponent.call(
this
);
06
07
this
.addEvents({
08
// add events
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();
/**
* 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);来构造。
0 0
- EXTJS中的类继承
- EXTJS中的类和继承
- EXTJS中的类和继承
- EXTJS中的继承
- extjs 中的命名空间、类方法、类继承等
- ExtJS入门 类与继承
- Extjs类继承时要点
- ExtJS 3.4 类继承机制
- Extjs继承
- ExtJs 继承
- extjs 初始化函数 中的 this.callParent(arguments);类似于继承么?就是继承父类的对应的初始化函数
- ExtJS入门之一 类与继承
- javascript Extjs 类继承示例方法
- (3)ExtJS之定义类与继承
- extjs 继承记录
- Extjs之组件继承
- EXTJS的继承机制
- extjs实现继承
- springMVC框架下JQuery传递并解析Json数据
- 长尾关键词如何优化呢?
- Leetcode全树类问题
- 关于重载与重写
- 把你送进世界500强企业的英文简历-应聘外企,一份高水准的简历必不可少。
- EXTJS中的类继承
- 玩转Android 之 绚丽的自定义Gallery
- 我的半平面交模板
- ponyDebugger安装失败处理和使用感悟
- base.superclass.constructor.call(this,config)
- JVM的GC简介和实例
- STL 之 pair 源码剖析
- 一些SQL语句
- 高斯消元