阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
时间:2022-04-23
本文章向大家介绍阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一般的,如果我们定义一个类,会定义一个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
- ASP.NET MVC Controller激活系统详解:IoC的应用[下篇]
- 使用Docker的Alluxio群集设置
- 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[中]:管道如何处理请求
- ASP.NET MVC Model元数据及其定制: 初识Model元数据
- 如何在企业中融入机器学习
- How ASP.NET MVC Works?
- 如果没有Visual Studio 2015,我们如何创建.NET Core项目 ?
- “前.NET Core时代”如何实现跨平台代码重用 ——源文件重用
- 简析Linux主要应用领域及范围
- ASP.NET MVC Controller激活系统详解:默认实现
- 机器之心年度盘点:2017年人工智能领域度备受关注的科研成果
- 为什么GAC和VS引用的程序集不一致?
- GraphQL 浅谈,从理解 Graph 开始
- 分布式系统CAP理论
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android物理键盘事件解析
- AndroidQ(10)分区存储完美适配方法
- (全局快捷键工具)Power Keys彻底提升码字效率?
- android自定义view实现钟表效果
- 教你如何用OpenVZ限制虚拟机硬盘IO速度
- Android自定义控件实现短信验证码自动填充
- android studio 3.6.1升级后如何处理 flutter问题
- Android项目迁移到AndroidX的方法步骤
- Android中layer-list基本使用详解
- Android Studio中主题样式的使用方法详解
- android点击无效验证的解决方法
- Android Studio 3.5格式化布局代码时错位、错乱bug的解决
- Android实现时钟特效
- 解决Android Studio Design界面不显示layout控件的问题
- Android读写文件工具类详解