`

阅读Ext学习Js(二)---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

分享到:
评论

相关推荐

    android-percent-support-extend源码

    总之,"android-percent-support-extend"源码提供了一个深入研究Android百分比布局的平台,对于想要提升Android开发技能,尤其是布局适配和优化的开发者而言,这是一个非常有价值的学习资源。仔细研究这个源码,不仅...

    前端开源库-html-webpack-random-extend-plugin

    Webpack是一个强大的模块打包工具,它允许我们将JavaScript、CSS、图片等各种资源视为模块进行管理和打包。HTML Webpack Plugin是Webpack生态系统中的一个插件,用于自动生成或注入HTML文件,以便在构建过程中引用...

    前端开源库-html-webpack-filter-extend-plugin

    在前端开发中,Webpack 已经成为构建现代JavaScript应用的必备工具,它负责模块的打包和优化。然而,随着项目复杂性的增加,开发者往往需要对Webpack配置进行更精细化的定制,以满足特定需求。这就是...

    Laravel开发-laravel-schema-extend

    在Laravel框架中,数据库操作是非常重要的一部分,而`laravel-schema-extend`是一个扩展库,专门用于增强Laravel的数据库架构系统,特别是在处理MySQL数据库的"列注释"(column comment)和"表注释"(table comment...

    前端开源库-underscore-deep-extend

    "前端开源库-underscore-deep-extend"就是这样一个工具,它专门为流行JavaScript实用库如underscore和lodash等提供了深度扩展(deep extend)的功能。 在JavaScript中,`extend`方法通常用于对象的合并,即将一个...

    EXT 实现省份--城市--地区--级连

    EXT,全称EXT JS,是一种基于JavaScript的开源富客户端框架,主要用于构建桌面Web应用程序。它提供了丰富的组件库,包括表格、表单、面板、菜单、工具提示等,以及强大的数据绑定和布局管理功能。在“EXT 实现省份--...

    mongoose-schema-extend, mongoose架构继承和鉴别器密钥扩展.zip

    mongoose-schema-extend, mongoose架构继承和鉴别器密钥扩展 mongoose-schema-extend实现架构继承和可选鉴别器键,用于存储集合中不同类型的相关文档,并以正确的模型类型获取它们。通知从 0.2.1版本mongoose-schema...

    foam-extend-4.1第三方库

    《深入理解foam-extend-4.1第三方库在OpenFOAM中的应用》 OpenFOAM,作为一款开源的计算流体动力学(CFD)软件,被广泛应用于工程和科研领域。它提供了丰富的功能和灵活性,使得用户可以对复杂的流体流动问题进行...

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    ext 继承(extend) 理解练习

    这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...

    Laravel开发-laravel-exception-extend

    二、laravel-exception-extend 的核心功能 1. **自定义异常渲染**:该项目可能提供了更灵活的异常渲染机制,允许你根据不同的异常类型返回不同格式的错误信息,如JSON、XML或自定义视图。 2. **异常日志增强**:...

    netbeans-checkstyle-4.1.0-bin_Extend_Sisi_

    标题 "netbeans-checkstyle-4.1.0-bin_Extend_Sisi_" 暗示了这是一个与NetBeans IDE相关的扩展,具体来说是Checkstyle插件的4.1.0版本。Checkstyle是一款开源的静态代码分析工具,它帮助开发者遵循特定的编程规范和...

    EXT测试小样例--EXT测试小样例

    EXT JS是一个用于构建富客户端Web应用程序的JavaScript库,特别适用于创建数据驱动、交互性强的用户界面。EXT Grid是EXT JS中的一个核心组件,它提供了一种高效的数据网格展示方式,常用于数据表格的显示和操作。 ...

    Laravel开发-laravel_model_extend

    3. **软删除**:启用软删除(Soft Deletes)后,删除模型时并不会真的从数据库中移除,而是设置一个`deleted_at`字段。 4. **聚合函数**:Eloquent支持计数(count)、求和(sum)、平均值(avg)、最大值(max)、...

    cesium-extend_Extend_cesium拓展entity_cesium_

    Cesium是一个强大的开源JavaScript库,用于在Web上创建交互式的3D地球模型。"cesium-extend"项目是针对Cesium的功能扩展包,旨在增强其原生能力,提供更多的实用功能,如白模(Wireframe)展示和避让(Occlusion)...

    ext继承重写

    在EXT JS这个强大的JavaScript框架中,"继承"和"重写"是两个核心概念,它们在构建可复用和模块化的应用程序中起着至关重要的作用。EXT JS采用面向对象的编程方式,允许开发者通过继承机制来扩展类的功能,同时通过...

    com.guo.android_extend:android-extend:1.0.6

    压缩包内的文件 "android-extend-release.aar" 是一个 Android 库的二进制格式,它包含了编译后的 Java 类、资源文件、AndroidManifest.xml 等内容。`.aar` 文件是 Android 库项目的标准打包格式,用于在 Gradle ...

Global site tag (gtag.js) - Google Analytics