javascript:base.superclass.constructor.call(this,config)

最新推荐文章于 2021-03-25 22:20:00 发布

转载最新推荐文章于 2021-03-25 22:20:00 发布 · 71 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了ExtJS中实现类继承的多种方式，包括使用JavaScript原生方法、ExtJS提供的Ext.extend函数及如何正确调用父类构造函数等。通过具体实例展示了如何添加新方法、重写父类方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript中类的继承机制如下，有一个baseClass的类，然后为其定义两个方法，someMethod()和overwriteMethod()

1var BaseClass = function(){

2//do something

3};

4BaseClass.prototype.someMethod = function(){

5//do something

6};

7BaseClass.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实现类的继承

01var SubClass = function(){

02   BaseClass.call(this);

03};

04SubClass.prototype = new BaseClass();

05SubClass.prototype .newMethod = function(){

06  //do something

07};

08SubClass.prototype.overridenMethod = function(){

09  //do something

10};

2使用EXTjs的extend()函数

1varSubClass = function() {

2    SubClass.superclass.constructor.call(this);

3};

4Ext.extend(SubClass, BaseClass, {

5    newMethod : function() {},

6    overriddenMethod : function() {}

7};

3 extjs中替换constructor

01// initComponent replaces the constructor: 

02SubClass = 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);这样就得到了一个继承了父类的所有属性和函数的子类。

下面是一个完整的类继承的例子

01SuperClass=function(){

02}

03SuperClass.prototype.AA=function(){

04    alert('aa');

05}

06        

07SubClass=function(){

08     SubClass.superclass.constructor.call(this);          

09}

10Ext.extend(SubClass,SuperClass,{

11     BB:function(){alert('新方法');},

12     AA:function(){alert('重写方法');}

13}//配置信息主要用来重写父类的方法和添加新方法

14);

15        

16var sub=new SubClass();

17 sub.AA();

18sub.BB();

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

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

01IDB.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});

1IDB.ConsoleManager = function() {

2  IDB.ConsoleManager.superclass.constructor.call(this , {

3    items:[new Ext.Panel({title:'标题1'})]

4  });

5};

6Ext.extend(IDB.ConsoleManager, IDB.MyTabPanel)

总结一下，对于EXTjs来说，有一个base类，子类使用extend来继承base类，extend有三个参数，第一个是子类即this，第二个参数是base类，第三个参数是config。另外子类在构造的时候使用subclase.superclass.construtor.call(this);来构造。