阅读Ext学习Javascript(二) Core/Ext.extend从继承说起

最新推荐文章于 2022-07-01 11:17:38 发布

原创最新推荐文章于 2022-07-01 11:17:38 发布 · 506 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ext #function #io #框架 #扩展

本文解析了JavaScript中实现继承的基本方法，并深入探讨了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