javascript中类的继承机制如下,有一个baseClass的类,然后为其定义两个方法,someMethod()和overwriteMethod()
1 |
var BaseClass = function (){ |
4 |
BaseClass.prototype.someMethod = function (){ |
7 |
BaseClass.prototype.overridenMethod = function (){ |
对于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 (){ |
04 |
SubClass.prototype = new BaseClass(); |
05 |
SubClass.prototype .newMethod = function (){ |
08 |
SubClass.prototype.overridenMethod = function (){ |
2使用EXTjs的extend()函数
1 |
var SubClass = function () { |
2 |
SubClass.superclass.constructor.call( this ); |
4 |
Ext.extend(SubClass, BaseClass, { |
5 |
newMethod : function () {}, |
6 |
overriddenMethod : function () {} |
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 ); |
Ext.extend()函数提供了直接访问父类构造函数的途径,通过 SubClass.superclass.constructor.call(this);就可以直接调用父类的构造函数,这个函数的第一个参数总是 this,以确保父类的构造函数在子类的作用域里工作。
如果父类的构造函数需要传入参数,可以讲所需的参数直接传递给它: SubClass.superclass.constructor.call(this,config);这样就得到了一个继承了父类的所有属性和函数的子类。
下面是一个完整的类继承的例子
01 |
SuperClass= function (){ |
03 |
SuperClass.prototype.AA= function (){ |
08 |
SubClass.superclass.constructor.call( this ); |
10 |
Ext.extend(SubClass,SuperClass,{ |
11 |
BB: function (){alert( '新方法' );}, |
12 |
AA: function (){alert( '重写方法' );} |
13 |
} //配置信息主要用来重写父类的方法和添加新方法 |
16 |
var sub= new SubClass(); |
结果是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' }); |
08 |
this .databasePanel , this .tabPanel , this .sqlConsole |
10 |
getDatabasePanel: function () { |
11 |
return this .databasePanel; |
14 |
IDB.WebsqlConsole.superclass.initComponent.call( this ); |
1 |
IDB.ConsoleManager = function () { |
2 |
IDB.ConsoleManager.superclass.constructor.call( this , { |
3 |
items:[ new Ext.Panel({title: '标题1' })] |
6 |
Ext.extend(IDB.ConsoleManager, IDB.MyTabPanel) |
总结一下,对于EXTjs来说,有一个base类,子类使用extend来继承base类,extend有三个参数,第一个是子类即this,第二个参数是base类,第三个参数是config。另外子类在构造的时候使用subclase.superclass.construtor.call(this);来构造。
- 你真的会用ABAP, Java和JavaScript里的constructor么?
如果constructor里调用了一个成员方法,这个方法被子类override了,当初始化一个子类实例时,父类的构造函数被的调用,此时父类构造函数的上下文里调用的成员方法,是父类的实现还是子类的实现? ...
- 深入浅析JavaScript中的constructor
constructor 属性返回对创建此对象的数组函数的引用.本文给大家介绍JavaScript中的constructor ,需要的朋友参考下吧 定义和用法 constructor 属性返回对创建此对 ...
- JavaScript——this、constructor、prototype
this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用a ...
- javascript typeof 和 constructor比较
转自:http://www.cnblogs.com/hacker84/archive/2009/04/22/1441500.html http://www.cnblogs.com/siceblue/a ...
- 【转】JavaScript中的constructor与prototype
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- JavaScript对象属性 constructor
对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...
- Javascript Prototype __proto__ constructor 三者的关系
JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...
- JavaScript中的constructor和继承
概述 这是我在看JavaScript面向对象编程指南的时候,对constructor和继承的总结. 关于它们的详细知识,可以上网查到,所以我只写那些网上没有的. 内容 constructor的理解 c ...
- javascript原型继承---constructor篇
很多人对constructor的理解是指向对象的构造函数,今天才发现这种理解是有偏差的... 其实, constructor指向的不是实例化实例的构造函数,而是实例化该对象的构造函数的原型的构造函数 ...
随机推荐
- 2013 ACM/ICPC 杭州网络赛C题
题意:驴和老虎,在一个矩阵的两个格子里,有各自的起始方向.两者以相同的速度向前移动,前方不能走时驴总是向右,老虎总是向左.他们不能超出矩阵边界也不能走自己走过的格子(但可以走对方走过的格子).如果不能 ...
- 解决JavaFTP上传文件假死问题
之前使用ftp上传文件,代码很稳定,用了快三年,因为数据迁移,从搭建了ftp服务器,配置好ip和账号密码后,再使用之前代码发现: 在下载过程中,程序出现假死的现象,就是,既不报错,也不抛异常,还不终止 ...
- JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
- django为url写测试用例
这个和为orm写测试用例类似. 但为了区分文件,还是建议在app目录下,用tests_orm.py,tests_url.py这类单独文件加以区分. urls.py如果如这样. from django. ...
- 【推荐】关于JS中的constructor与prototype【转】
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- Visual Studio 2013 发布正式版及使用感受
(注意:文末我添加了一个小节,用来更新最新的一些使用感受.) 昨天晚上,微软在正式发布Windows 8.1的同时,也同时发布了Visual Studio 2013产品系列的正式版. 版本情况 Vis ...
- 004.SMB之guest级别配置
一 配置文件修改 注意: 1 share级别权限访问即,无任何验证共享,对guest开放. 2 新版samba4已取消share级别,可使用user级别配置成无验证共享. 1.1 全局配置文件修改 [ ...
- python基础下的数据结构与算法之链表
一.链表的定义 用链接关系显式表示元素之间顺序关系的线性表称为链接表或链表. 二.单链表的python实现 class Node(object): """定义节点&quo ...
- NOSQL快速入门
NoSql是一个很老的概念了,但对自己来说,仍然是一个短板,果断补上. 首先通过几个简单的例子来了解NOSQL在国内的情况(2013年左右的数据,有些过时),比如新浪微博,其就有200多台物理机运行着 ...
- Spring-Session实现Session共享Redis集群方式配置教程
循序渐进,由易到难,这样才更有乐趣! 概述 本篇开始继续上一篇的内容基础上进行,本篇主要介绍Spring-Session实现配置使用Redis集群,会有两种配置方式,一种是Redis-Cluster, ...