您的位置：首页 > Web前端 > JavaScript

Extjs之superclass.constructor.call(this)之理解

2017-11-09 14:15 465 查看


EXTJS中的类继承

最近在用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])用来继承已有的类
对于类的继承有几下几种方式：

1javascript实现类的继承

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
};
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
};
3extjs中替换constructor

01
//
initComponentreplacestheconstructor:
02
SubClass
=Ext.extend(BaseClass,{
03
initComponent
:
function
(){
04
//
callsuperclassinitComponent
05
Ext.Container.superclass.initComponent.call(
this
);
06
07
this
.addEvents({
08
//
addevents
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出重写方法，和新方法。

/**

*17.11.09

*/

这里补充一个稍微复杂的例子，以下是两种不同的继承方式

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);来构造。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航