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添加输出窗口的代码
Feb 07 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
使用Vue生成动态表单
Nov 26 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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小程序自动提交到自助友情连接
2009/11/24 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python 函数中的参数类型
2020/02/11 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
法人代表资格证明书
2015/06/18 职场文书
php修改word的实例方法
2021/11/17 PHP
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
MySQL自定义函数及触发器
2022/08/05 MySQL