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中eval函数的使用方法与示例
Apr 09 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
js获取微信版本号的方法
May 12 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
vue-cli点击实现全屏功能
Mar 07 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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
stripos函数知识点实例分享
2019/02/11 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
img标签中onerror用法
2009/08/13 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python线程详解
2015/06/24 Python
Python中反射和描述器总结
2018/09/23 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
毕业自我评价范文
2013/11/17 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
初中生毕业评语
2014/12/29 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python