阅读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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

深入理解C++11(一)

导语 从最初的代号C++0x到最终的名称C++11,C++的第二个真正意义上的标准姗姗来迟。 C++11是一种新语言的开端。虽然设计C++11的目...

1989
来自专栏Java爬坑系列

【Java入门提高篇】Day18 Java容器类详解(一)Collection接口

  所谓容器,就是专门用来装对象的东西,如果你学过高数,没错,就跟里面说的集合是一个概念,就是一堆对象的集合体,但是集合类是容器类中的一个子集,为了区别表示,所...

24110
来自专栏工科狗和生物喵

【我的漫漫跨考路】数据结构之队列的线性实现

正文之前 最近在家流年不利,先是昨天家里路由器还是ADSL调制解调器坏了。反正是没网了!然后,今天上午还停电了,昨晚因为熬夜写码,所以忘了给手机充电了。早上起来...

2848
来自专栏数据分析

[数据清洗]-混乱的邮编数据

 内容概要: 我们怎么知道是混乱的数据 修复 nan 值和字符串/浮点类型的混乱问题 “-”怎么处理 整合代码 # 导入需要的包 imp...

4297
来自专栏Python中文社区

关于生成器的那些事儿

关于生成器的那些事儿 作者:李者璈 写在前面的话 ❈ 本来想这周继续写写 Flask 那点破事儿的,但是想了想决定换换口味,来聊聊很不容易理解但是很重要的 Py...

1989
来自专栏Jimoer

Java设计模式学习记录-迭代器模式

这次要介绍的是迭代器模式,也是一种行为模式。我现在觉得写博客有点应付了,前阵子一天一篇,感觉这样其实有点没理解透彻就写下来了,而且写完后自己也没有多看几遍,上次...

913
来自专栏Play & Scala 技术分享

挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它...

1746
来自专栏JarvanMo的IT专栏

Dart In Action -Dart快速入门(五)

本文基本上是将dart官网部分内容进行翻译,没兴趣的请出门左转至Dart的官网,有兴趣的同志请继续阅读本文。 Flutter教程在这里

1573
来自专栏Python小屋

Python+tensorflow计算整数阶乘的方法与局限性

本文代码主要演示tensorflow的基本用法。 import tensorflow as tf # 创建变量,保存计算结果 start = tf.Variab...

3635
来自专栏JarvanMo的IT专栏

Dart In Action -Dart快速入门(五)

本文基本上是将dart官网部分内容进行翻译,没兴趣的请出门左转至Dart的官网,有兴趣的同志请继续阅读本文。

1253

扫码关注云+社区

领取腾讯云代金券