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 };

2使用EXTjs的extend()函数

1 varSubClass = function() {
2     SubClass.superclass.constructor.call(this);
3 };
4 Ext.extend(SubClass, BaseClass, {
5     newMethod : function() {},
6     overriddenMethod : function() {}
7 };

3 extjs中替换constructor

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();

结果是alert出重写方法，和新方法。

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

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

最新文章

  1. Hbase入门教程--单节点伪分布式模式的安装与使用
  2. Delphi容器类之---Tlist，TStringlist，THashedStringlist的效率比较
  3. paper 120：计算距离矩阵的函数的pdist和pdist2函数
  4. ie8兼容
  5. KTV点歌系统
  6. TS
  7. HTML5-draggable(拖放)
  8. C 二叉树
  9. MVC中的路由
  10. MySQL之查询优化方式（笔记）
  11. 淘宝内部分享：怎么跳出MySQL的10个大坑
  12. python web环境相关
  13. Java与算法之(12) - 老鼠再闯迷宫(广度优先算法)
  14. 【翻译】在Ext JS应用程序中使用自定义图标
  15. LuoguP2617 Dynamic Rankings (动态主席树学习理解)
  16. 多功能版vue日历控件
  17. MySQL【日期和时间处理函数】的使用方法
  18. Java 字符编码（一）Unicode 字符编码
  19. Nginx 解析PHP的原理 | CGI、FastCGI及php-fpm的关系
  20. 批处理 ------ @、ECHO OFF、ECHO ON 的使用

热门文章

  1. [cookie篇]cookie-parser之parser.js
  2. elasticsearch分别在windows和linux系统安装
  3. (转载)ibatis：解决sql注入问题
  4. centos7执行 wget命令: command not found的两种解决方法
  5. VMware下三种网络连接模式
  6. (转载）How browsers work--Behind the scenes of modern web browsers （前端必读）
  7. CentOS 7 通过 yum 安装 nodejs 和 npm
  8. 关于调用&&传址
  9. android Service oncreate 在UI线程 何时用service，何时用thread
  10. 缩减apk大小