zoukankan      html  css  js  c++  java
  • 阅读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

  • 相关阅读:
    Devexpress GridView添加行号
    Devexpress GridControl 常用设置
    导入Excel部分数据导入不了的原因及处理
    GridView里面的HyperLink和ButtonField操作总结
    sybase数据表的导出与导入
    uniapp的unistarter的白名单访问模式需要绝对路径
    vue 用vif隐藏显示切换大量dom元素,导致一个页面上一个组件多次调用的created不能全部执行的修改方法
    2013腾讯编程马拉松初赛:小Q系列故事——屌丝的逆袭
    Tensorflow Federated(TFF)框架整理(上)
    Stateful TFF
  • 原文地址:https://www.cnblogs.com/boolean/p/927949.html
Copyright © 2011-2022 走看看