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

javascript:base.superclass.constructor.call(this,config)的更多相关文章

  1. 你真的会用ABAP, Java和JavaScript里的constructor么?

    如果constructor里调用了一个成员方法,这个方法被子类override了,当初始化一个子类实例时,父类的构造函数被的调用,此时父类构造函数的上下文里调用的成员方法,是父类的实现还是子类的实现? ...

  2. 深入浅析JavaScript中的constructor

    constructor 属性返回对创建此对象的数组函数的引用.本文给大家介绍JavaScript中的constructor ,需要的朋友参考下吧 定义和用法 constructor 属性返回对创建此对 ...

  3. JavaScript——this、constructor、prototype

    this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用a ...

  4. javascript typeof 和 constructor比较

    转自:http://www.cnblogs.com/hacker84/archive/2009/04/22/1441500.html http://www.cnblogs.com/siceblue/a ...

  5. 【转】JavaScript中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  6. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  7. Javascript Prototype __proto__ constructor 三者的关系

    JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...

  8. JavaScript中的constructor和继承

    概述 这是我在看JavaScript面向对象编程指南的时候,对constructor和继承的总结. 关于它们的详细知识,可以上网查到,所以我只写那些网上没有的. 内容 constructor的理解 c ...

  9. javascript原型继承---constructor篇

    很多人对constructor的理解是指向对象的构造函数,今天才发现这种理解是有偏差的... 其实, constructor指向的不是实例化实例的构造函数,而是实例化该对象的构造函数的原型的构造函数 ...

随机推荐

  1. linux根据端口查找进程【原创】

    如转载请注明地址 1.利用lsof -i:端口号 lsof -i:端口号 [root@01 ~]# lsof -i:8097COMMAND PID USER FD TYPE DEVICE SIZE/O ...

  2. linux:根据名称杀死进程

    参考网址:https://www.cnblogs.com/foohack/p/5359985.html pkill -f "process_name_pattern"

  3. POI操作Excel详解,HSSF和XSSF两种方式

    package com.tools.poi.lesson1; import java.io.FileInputStream; import java.io.FileNotFoundException; ...

  4. javascript-序列化,时间,eval,转义

    一:序列化 JSON.stringify(li) 将对象转字符串 JSON.parse(str1) 将字符串转对象 li=[11,22,33] [11, 22, 33] li [11, 22, 33] ...

  5. Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果

    前言 接着上一期Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件 的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效果 ...

  6. DDD领域模型企业级系统Unity(五)

    添加程序集: 写一个接口: public interface IPlayer { void Play(); } 两个实现类: public class NewPlay : IPlayer { publ ...

  7. Select查询语句1

    一.语法结构 select[all|distinct]select_list from table_name[join join_condition] where search_condition g ...

  8. Oracle 11g R2 32位 & Oracle 11g R2 64位 -百度云下载

    Oracle 11g R2 32位 & Oracle 11g R2 64位 -百度云下载 https://pan.baidu.com/s/1fuzy67Olfxzsy3WJMCrCnQ 提取码 ...

  9. Codeforces 405E Graph Cutting

    Graph Cutting 不会写.. dfs的过程中把回边丢到它的祖先中去, 回溯的时候两两配对.感觉好神奇啊. #include<bits/stdc++.h> #define LL l ...

  10. 002.MMM高可用MySQL简介

    一 简介 MMM即Multi-Master Replication Manager for MySQL:mysql多主复制管理器,基于perl实现,关于mysql主主复制配置的监控.故障转移和管理的一 ...