阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
来源:互联网 发布:看书的软件下载 编辑:程序博客网 时间:2024/05/16 05:14
======================================================
注:本文源代码点此下载
======================================================
一般的,如果我们定义一个类,会定义一个function对象,然后将公用方法写到其原型上,例如:
var tiger = function(){}
tiger.prototype.hunting = function(){}
但是要建立一个完善的框架或者类库,没有继承帮忙,组织代码将是一件非常辛苦且难以管理的工作。js中的类是function对象,实现继承,主要要将子类的原型设置为父类的一个实例(这样子类就用有了父类原型的所有成员),并重新将子类原型的构造器设置为子类自己。如以下代码所示:
function animal(){}
function tiger(){}
tiger.prototype = new animal()
tiger.prototype.constructor = tiger
实现继承并不难,将上面的animal和tiger参数化封装为一个方法就可以实现(当然实际应用中就要复制一些了),代码如下:
function extend(subfn, superfn){
subfn.prototype = new superfn()
subfn.prototype.constructor = subfn
}
ext作为一个优秀的框架,当然也少不了继承的实现。如前一篇文章所谈到的,现在让我们一行行代码理解ext.extend
extend : function(){
// inline overrides
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
return function(sb, sp, overrides){
if(typeof sp == 'object'){
overrides = sp;
sp = sb;
sb = function(){sp.apply(this, arguments);};
}
var f = function(){}, sbp, spp = sp.prototype;
f.prototype = spp;
sbp = sb.prototype = new f();
sbp.constructor=sb;
sb.superclass=spp;
if(spp.constructor == object.prototype.constructor){
spp.constructor=sp;
}
sb.override = function(o){
ext.override(sb, o);
};
sbp.override = io;
ext.override(sb, overrides);
return sb;
};
}()
本来只有两行代码就可以实现的继承变成了近30行,ext都做了什么呢?通常情况下只传入两个类型的话(subfn和superfn),上面的代码将简化为
extend : function(){
// inline overrides
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
return function(sb, sp, overrides){
var f = function(){}, sbp, spp = sp.prototype;
f.prototype = spp;
sbp = sb.prototype = new f();
sbp.constructor=sb;
sb.superclass=spp;
sb.override = function(o){
ext.override(sb, o);
};
sbp.override = io;
ext.override(sb, overrides);
return sb;
};
}()
定义一个空函数,将其原型设置为sp的原型spp,其实f就是sp的一个替身,理解的时候可以认为就是sp。将子类sb的原型设置为f的一个实例,然后再将其原型的构造器设置为自己sb,为了方便找到父类sp,在子类sb上添加了一个superclass属性为父类sp的原型spp。为了方便扩展属性,在子类sb上添加了属性重写的override方法,也在其原型上添加了override方法(这样其所有实例对象就可以从一个对象重写现有属性了)。
到这里算是对继承有了一些了解(不到位的地方在以后的阅读中继续加强)。好了,有了继承的支持,我们就可以加速类型的扩展了。
继续 阅读ext 学习javascript(三) event和observeable
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
- 阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
- 阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
- 阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
- 阅读Ext学习Javascript(二) Core/Ext.extend从继承说起
- Ext.extend 从继承说起
- 阅读Ext 学习Javascript(一)Core/Ext.js
- 阅读Ext 学习Javascript(一)Core/Ext.js
- 阅读Ext 学习Javascript(一)Core/Ext.jsjavascript
- ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承
- Javascript的继承和Ext的Extend
- JavaScript和ExtJS的继承 Ext.extend Ext.applyIf
- Ext的extend继承
- 转载 Ext.extend用法(ext的继承)
- Ext的extend继承1
- Ext的extend继承1
- Ext.Observable,Ext.extend,javaScript原型
- 10.1 从Ext.BLANK_IMAGE_URL说起
- 【Ext学习系列】Ext简介(二)
- AntiXSS - 支持Html同时防止XSS攻击
- [原创][备忘]“第五期HTML5技术分享沙龙——南京站(2011年7月16日)”Demo在线演示 及 源代码下载
- delphi编译错误信息
- frameset元素属性详解
- Ajax 中 AutoCompleteExtender 的使用
- 阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
- MYSQL解决Starting MySQL..Manager of pid-file quit without updating file
- .net HTMLParser详细使用说明 强大的Filter类 解析HTML文档如此简单
- js各类事件触发大全
- 首页html代码的<head>和</head>之间的内容
- java学习_jdk安装
- 在C++中,你可以使用空指针调用静态函数
- Ajax应用
- html的学习小结(2):HTML 头部