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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
详解redux异步操作实践
Aug 15 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 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统计字符串中中英文字符的个数
2013/06/23 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
Python实现处理管道的方法
2015/06/04 Python
利用python画一颗心的方法示例
2017/01/31 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
毕业论文评语大全
2014/04/29 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android