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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JSON stringify方法原理及实例解析
Oct 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
原生js轮播特效
2017/05/18 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
PHP开发的一般流程
2013/08/13 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
运动会稿件50字
2014/02/17 职场文书
幼教求职信
2014/03/12 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Promise静态四兄弟实现示例详解
2022/07/07 Javascript