一般的,如果我们定义一个类,会定义一个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
分享到:
相关推荐
android-percent-support-extend源码,是一个很不错的Android代码,有兴趣的伙伴们抽时间可以看一下把。
Laravel开发-laravel-schema-extend 支持mysql的“column comment”和“table comment”。
前端开源库-underscore-deep-extendunderline deep extend是为underline、lodash和friends实现的Deepextend。
前端开源库-html-webpack-random-extend-pluginHTML Webpack随机扩展插件,扩展随机cdnprefix
Laravel开发-laravel_model_extend Laravel模型扩展
Laravel开发-laravel-exception-extend 异常化编程展
前端开源库-html-webpack-filter-extend-pluginHTML Webpack筛选器扩展插件,使用时
mongoose-schema-extend, mongoose架构继承和鉴别器密钥扩展 mongoose-schema-extend实现架构继承和可选鉴别器键,用于存储集合中不同类型的相关文档,并以正确的模型类型获取它们。通知从 0.2.1版本mongoose-schema...
python爬虫-19-列表增加数据之extend.ev4.rar
用法在您的Babel 6配置中,例如,在.babelrc您可能拥有{ "plugins": [ ["babel-plugin-transform-builtin-extend", { globals: ["Error", "Array"] }] ]}这将启用该插件并将其配置为查找扩展Error或Array全局变量的...
EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例
foam-extend-4.1的地方库,安装时将库放在指定文件夹,不需要下载,可以直接安装编译。 库文件来自于互联网,用于学习使用。
otro coso de extend sisi
#nodebb-plugin-header-extend 这个简单的插件可以自定义站点菜单。 ##安装两种选择: 通过ACP安装插件(如果它已添加到列表中, cough cough ) 在NodeBB安装的根目录中运行npm install nodebb-plugin-header-...
cesium 功能拓展包,包括白模 避让等
js代码-PINK老师2-类的继承extend以及super关键字的使用
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装