02.Javascript中的继承----Inherits

 

02.Javascript中的继承----Inherits

本文不再过多的阐述OOP中继承的概念,只是用原生的Javascript代码来模拟类继承(不是对象扩展)

类继承:inherits

假设有已定义好的超类(父类)SuperClass和待继承的子类SubClass,于是,可以定义如下的方法来实现类继承

inherits方法的定义

如下的这个inherits方法,其实现思想主要参考《Pro JavaScript Design Patterns》【Ross Harmes and Dustin Diaz】

/**
 * 这个方法用来实现类继承
 * @param {function} subClass 待继承的子类
 * @param {function} superClass 待被继承的父类
 * @exception {Error} 参数不合法时抛出异常
 */
var inherits = function(subClass,superClass){
    if(arguments.length !== 2){
        throw new Error("必须明确的指定子类和父类");
    }
    for(var i = 0,n = arguments.length;i < n;i++){
        if(typeof arguments[i] !== "function"){
            throw new Errorr("所给的子类和父类必须都是function");
        }
    }
    var F = function(){};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;    
};

该方法的内部会进行严格的参数合法性检查,参数必须是两个,即一个子类,一个父类;另外还要求两个参数都必须是function类型,否则抛出异常,宣告继承失败

inherits方法的使用
▲第一步
/**
 * 定义父类
 */
var SuperClass = function(){};
SuperClass.prototype = {
    name : "赵先烈",
    talk : function(){
        alert("我的名字叫" + this.name);
    }
};    

/**
 * 这里定义子类
 */
var SubClass = function(){};    

//实施继承
inherits(SubClass,SuperClass);

//创建子类并从调用从子类继承过来的方法
var oSub = new SubClass();
oSub.talk();    //这里输出:我的名字叫赵先烈

从程序的执行结果可以看出,这种继承方法是将父类中的全部内容(除构造器以外)拷贝到子类中来,顺利的完成了类继承。

▲第二步
/**
 * 这里定义父类
 */
var SuperClass = function(){
    this.name = "赵先烈";
    this.talk = function(){
        alert("我的名字叫" + this.name);
    };
};

/**
 * 这里定义子类
 */
var SubClass = function(){
    //这是一个空类
};

//实施继承
inherits(SubClass,SuperClass);

//创建子类对象,并调用从父类继承过来的方法
var oSub = new SubClass();
oSub.talk();    //按照继承的概念,这里应该输出:我的名字叫赵先烈

程序真正执行后,才发现发生异常了,原因:在oSub实例中不存在talk方法。不是已经通过inherits方法实现继承了么,为什么会没有这个 方法呢?探究其原因,是因为在inherits的内部,只是将SuperClass的原型链原样的拷贝给了SubClass,而不在SuperClass 原型链中的属性及方法,子类就拿不到了。

那么,既要支持第一种继承,也要能满足第二种,我们只能再次对inherits方法进行升级了,将其改为如下形式:

/**
 * 这个方法用来实现类继承
 * @param {function} subClass 待继承的子类
 * @param {function} superClass 待被继承的父类
 * @exception {Error} 参数不合法时抛出异常
 */
var inherits = function(subClass,superClass){
    if(arguments.length !== 2){
        throw new Error("必须明确的指定子类和父类");
    }
    for(var i = 0,n = arguments.length;i < n;i++){
        if(typeof arguments[i] !== "function"){
            throw new Errorr("所给的子类和父类必须都是function");
        }
    }
    subClass.prototype = new superClass();
    subClass.prototype.constructor = subClass;
};

经过这样的改动,第一步和第二步中的情况就都能顺利的正常的执行了。

▲第三步

如果在第二步的基础上,将代码中的SubClass.prototype改为如下形式:

SubClass.prototype = {
    walk : function(){ 
        alert("偶也,我可以走路了哎");
    },
    talk : function(){
        alert("我的名字不叫" + this.name);
    }

};

再执行如下代码:

inherits(SubClass,SuperClass);

var oSub = new SubClass();
oSub.talk();    //这里仍然输出:我的名字叫赵先烈
//重点在下面这句
oSub.walk();    //这里会抛出异常,告诉我们,walk方法不存在

分析这个结果,oSub.talk()的输出应该为:我的名字不叫赵先烈。并且oSub.walk()也应该有输出,程序应该正常执行才对。但是,为什么会有这样的运行结果呢?

这到底是为什么呢?相信你一定早就发现了,在inherits方法中有这样一句关键的代码:

subClass.prototype = new superClass();

这里已经告诉我们,原来,子类中的原型链已经被完全替换了,其实仔细说起来,这样做是有违继承的原则的(一般不都是子类覆盖父类么?怎么 反过来了呢)。

但是这样的问题我们始终要解决,必须让这个所谓的继承能同时满足以上三种情况都能正常执行。苦思冥想后,决定改成这样:

/**
 * 这个方法用来实现类继承
 * @param {function} subClass 待继承的子类
 * @param {function} superClass 待被继承的父类
 * @exception {Error} 参数不合法时抛出异常
 */
var inherits = function(subClass,superClass){
    if(arguments.length !== 2){
        throw new Error("必须明确的指定子类和父类");
    }
    for(var i = 0,n = arguments.length;i < n;i++){
       if(typeof arguments[i] !== "function"){
            throw new Errorr("所给的子类和父类必须都是function");
        }
    }

    var oSuper = new superClass();
    for(var key in oSuper){
        if(!subClass.prototype[key]){
            subClass.prototype[key] = oSuper[key];
        }
    }
    subClass.prototype.constructor = subClass;
};

OK,通过这样的升级,再次运行上面的代码,顺利通过了。

上面这个通过两次升级的inherits方法也是目前比较稳定的版本了,在后续的文章中所指的inherits方法,就是这个了。

本文旨在共同探讨Javascript中类的继承方式,只是其中的一种模拟方式,模拟之不当,还请见谅。

欢迎提出宝贵的升级建议。

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值