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 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
vue按需加载实例详解
Sep 06 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
新闻内页-JS分页
2006/06/07 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
文职个人求职信范文
2013/09/23 职场文书
医院实习介绍信
2014/01/12 职场文书
写自荐信的注意事项
2014/03/09 职场文书
青安岗事迹材料
2014/05/14 职场文书
节约能源标语
2014/06/17 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
学生检讨书如何写
2014/10/30 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python