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 面向对象(二)封装代码
May 23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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+Html+缓存
2006/12/20 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python探索之pLSA实现代码
2017/10/25 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python在地图上画比例的实例详解
2020/11/13 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
简单的辞职信范文
2014/01/18 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
教师个人鉴定材料
2014/02/08 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《春天来了》教学反思
2014/04/07 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
课外活动总结
2015/02/04 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书