Extjs中使用extend(js继承) 的代码


Posted in Javascript onMarch 15, 2012

注:抄<深入浅出Extjs>书
传统的js实现继承操作为:
一:定义一个父类

var BaseClass = function(){ 
//..... 
}; 
BaseClass.prototype.someMethod = function(){ 
//..... 
}; 
BaseClass.prototype.overridenMethod = function(){ 
//.... 
}

为BaseClass定义两个函数someMethod 和overridenMethod ,,然后定义一个subClass子类,可以直接从BaseClass中继承所有的属性和函数,
var subClass = function(){ 
BaseClass.call(this); 
}; 
subClass.prototype = new BaseClass(); 
subClass.prototype.newMethod = function(){ 
//... 
}; 
subClass.prototype.overridenMethod = function(){ 
//... 
}

在上面的代码中,subClass的构造函数首先调用BaseClass的构造函数初始化数据,然后通过subClass.prototype = new BaseClass();这条语句让subClass类获得BaseClass中的所有属性和函数。这样就实现了继承。在此之后我们就可以操作subClass的prototype,为子类添加新的函数或者覆写父类的同名函数。
在EXT中使用Ext.extend()函数实现继承功能的方法:
var subClass = function(){ 
subClass.superclass.costructor.call(this); 
}; 
Ext.extend(subClass, BaseClass,{ 
newMethod: function(){ 
//... 
}, 
overridenMethod : function(){ 
//.... 
} 
});

在Ext.extend()函数通过 subClass.superclass.costructor.call(this);就可以直接调用父类的构造函数。这个函数的第一个参数总是this, 以确保父类的构造函数在子类的作用域里工作。
如果父类的构造函数需要传入参数,我们也就可以将所需要的参数直接传给它,如:
subClass.superclass.costructor.call(this, config);
这样我们就得到了一个继承了父类的所有属性和函数的子类。
Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 #Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 #Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 #Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 #Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 #Javascript
javascript 基础篇4 window对象,DOM
Mar 14 #Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 #Javascript
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
react build 后打包发布总结
2018/08/24 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Python 硬币兑换问题
2019/07/29 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
基于python实现查询ip地址来源
2020/06/02 Python
python时间time模块处理大全
2020/10/25 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
高三自我评价
2014/02/01 职场文书
就职演讲稿范文
2014/05/19 职场文书
党校毕业心得体会
2014/09/13 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
围城读书笔记
2015/06/26 职场文书
药房管理制度范本
2015/08/06 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis