js继承

   继承:许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠***原型链***来实现的。

原型链

  • 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法。
  • 基本概念:令一个原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此蹭蹭递进,就构成了实例与原型的链条,形成原型链。
    实现原型链有一种基本模式,其代码如下

        function SuperType(){
            this.property = true;
        }
    
        SuperType.prototype.getSuperValue = function(){
            return this.property;
        };
    
        function SubType(){
            this.subproperty = false;
        }
    
        //inherit from SuperType
        SubType.prototype = new SuperType();
    
        SubType.prototype.getSubValue = function (){
            return this.subproperty;
        };
    
        var instance = new SubType();
        alert(instance.getSuperValue());   //true
    
        alert(instance instanceof Object);      //true
        alert(instance instanceof SuperType);   //true
        alert(instance instanceof SubType);     //true
    
        alert(Object.prototype.isPrototypeOf(instance));    //true
        alert(SuperType.prototype.isPrototypeOf(instance)); //true
        alert(SubType.prototype.isPrototypeOf(instance));   //true
    

    在上面代码中,原来存在于SuperType的实例中的所有属性和方法,现在也存在于SubType.prototype中了。在确立了继承关系之后,我们给SubType.prototype添加了一个方法,这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。实现的本质是重写原型对象,代之以一个新类型的实例。 需要注意的是:instance.constructor现在指向的是SuperType,这是因为原来SubType.prototype中的constructor被重写的缘故。

  • 原型链的问题:原型链虽然很强大,可以用它来实现继承,但也存在一些问题,最大的问题来自包含引用类型值的原型。因为包含引用类型值的原型属性会被所有实例共享;而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原来的实例属性也就顺理成章的变成了现在的原型了。用下面代码来说明

     function SuperType(){
            this.colors = ["red", "blue", "green"];
        }
    
        function SubType(){            
        }
    
        //inherit from SuperType
        SubType.prototype = new SuperType();
    
        var instance1 = new SubType();
        instance1.colors.push("black");
        alert(instance1.colors);    //"red,blue,green,black"
    
        var instance2 = new SubType();
        alert(instance2.colors);    //"red,blue,green,black"

    如上代码可看出,subType的所有实例都会共享这一个colors属性。而我们对sintance1.colors的修改能够通过instance2.colors反应出来

  • 原型链的第二个问题是:在创建子类型时,不能向超类型(父类)的构造函数中传递参数。实际上,应该说没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。所以在实际中很少会单独使用原型链。

借用构造函数

  • 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术。这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数。别忘了,函数只不过是在特定环境下执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。代码如下

     function SuperType(){
            this.colors = ["red", "blue", "green"];
        }
    
        function SubType(){  
            //inherit from SuperType
            **SuperType.call(this);**
        }
    
        var instance1 = new SubType();
        instance1.colors.push("black");
        alert(instance1.colors);    //"red,blue,green,black"
    
        var instance2 = new SubType();
        alert(instance2.colors);    //"red,blue,green"

    第二个函数中的那一行代码“借调”了超类型的构造函数。通过使用call()方法,我们实际上是在新创建的SubType实例的环境下调用了SuperType构造函数。这样一来,就会在新的SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果,SubType的每个实例都会有自己的colors属性的副本了。

  • 传递参数:相对于原型链而言,借用构造函数由一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数,代码如下

    function SuperType(name){
            this.name = name;
        }
    
        function SubType(){  
            //inherit from SuperType passing in an argument
            SuperType.call(this, "Nicholas");
    
            //instance property
            this.age = 29;
        }
    
        var instance = new SubType();
        alert(instance.name);    //"Nicholas";
        alert(instance.age);     //29
  • 借用构造函数的问题:如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题–方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数也是很少单独用的。

组合继承

  • 组合继承指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。例子如下

    
        function SuperType(name){
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
    
        SuperType.prototype.sayName = function(){
            alert(this.name);
        };
    
        function SubType(name, age){  
            SuperType.call(this, name);
    
            this.age = age;
        }
    
        SubType.prototype = new SuperType();
    
        SubType.prototype.sayAge = function(){
            alert(this.age);
        };
    
        var instance1 = new SubType("Nicholas", 29);
        instance1.colors.push("black");
        alert(instance1.colors);  //"red,blue,green,black"
        instance1.sayName();      //"Nicholas";
        instance1.sayAge();       //29
    
    
        var instance2 = new SubType("Greg", 27);
        alert(instance2.colors);  //"red,blue,green"
        instance2.sayName();      //"Greg";
        instance2.sayAge();       //27

    组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为javascript最常用的继承模式。而且instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值