• Javascript之对象的继承


    继承是面向对象语言一个非常重要的部分。许多OOP语言都支持接口继承和实现继承两种方式。接口继承:继承方法签名;实现继承:继承实际的方法。在ECMAScript中函数是没有签名的,所以也就无法实现接口继承,只能支持实现继承。

    在JavaScript中有大概六种继承方式,它们分别是:原型链继承,借用构造函数继承,组合继承,原型式继承,寄生式继承和寄生组合式继承。下面就是对着六种继承方式的详细介绍。

    1.原型链

    基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在这里还得补充一下,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

    function BasicType() {
         this.property=true;
         this.getBasicValue = function(){
         return this.property;
          };
    }
    function NewType() {
         this.subproperty=false;
    }
    NewType.prototype = new BasicType(); 
    var test = new NewType();
    alert(test.getBasicValue());   //true

    由上面可以知道,其本质上是重写了原型对象,代之一个新类型的实例。在通过原型链继承的情况下,要访问一个实例属性时,要经过三个步骤:1搜索实例;2搜索NewType.prototype;3搜索BasicType.prototype,此时才找到方法。如果找不到属性或者方法,会一直向上回溯到末端才会停止。要想确定实例和原型的关系,可以使用instanceof和isPrototypeof()测试,只要是原型链中出现过的原型,都可以说是该原型链所派生实例的原型。还有一点需要注意,通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这时会重写原型链,原型链会被截断。

    2借用构造函数继承

    其大体思路是,在子类型构造函数的内部调用超类型构造函数。

    function BasicType(name) {
    this.name=name;
    this.color=["red","blue","green"]; } function NewType() { BasicType.call(this,"syf");
    this.age=23; }
    var test = new NewType();

    alert(text.name);
    //syf
    alert(text.age);   //23

    这种继承实现方式有一种优势就是,可以在子类型构造函数中向超类型构造函数中传递参数,其缺点是不能进行函数复用。

    3组合式继承     

    组合继承就是将原型链和借用构造函数继承模式结合起来,从而具有二者优势的方法。其理念是使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

    function BasicType(name) {
         this.name=name;
         this.colors=["red","blue","green"];
    }
    BasicType.prototype.sayName=function(){
         alert(this.name);
    }
    function NewType(name,age) {
         BasicType.call(this,name);
         this.age=age;
    }
    var test = new NewType("syf","23");
    test.colors.push("black");
    alert(test.colors);  //"red,blue,green,black"
    alert(test.name);   //"syf"
    alert(test.age);   //23

    组合式继承避免了原型链和借用构造函数继承方式的缺陷,融合了他们的优点,成为了js中最常用的继承方式。

    4原型式继承

    原型链继承和原型式继承只有一字之差,但他们的机理还是有所差别的。原型式继承是借助于已有的对象来创建新对象,也就是必须有一个对象可以作为另外一个对象的基础。继承方式函数表达为:

    function object (o) {
        function F(){}
        F.prototype = o;
        return new F();
    }

    我们可以在o的基础上进行修改,来创建特定的对象。直观上来说,其与原型链继承最大的不同之处就是没有使用new操作符。

    5寄生式继承

    寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来继承对象,最后再返回对象。具体为:

    function createAnother ( original ){
        var clone = object (original); //通过调用函数创建一个新对象
        clone.sayHi=function(){  //以某种方式来增强这个对象
            alert("hi");
        };
        return clone; //返回对象
    }

    在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。使用寄生式继承来为对象添加函数,函数复用率低。

    6寄生组合式继承

    上面提到组合式继承,其也是JS里最常用的基础模式。但,由于其会调用两次超类型的构造函数:一次在创建子类型的时候,另一次是在子类型构造函数内部。也就是子类型最终会包含超类型的全部实例属性,但在调用子类型构造函数时会重写这些属性。寄生组合式继承的大致思路为:通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。也就是说,不必为了指定子类型的原型而调用超类型的构造函数,我们需要的是超类型原型的一个副本而已。本质上就是,使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。基本模式如下:  

    function inheritPrototype (subType ,superType){
          var prototype = object (superType.prototype);  //创建对象,创建超类型原型的一个副本
           prototype.constructor = subType;   //增强对象,为创建的副本添加constructor属性
    subType.prototype = prototype; //指定对象,将新创建的对象赋值给子类型的原型
    }

    由于寄生组合式继承弥补了组合式继承缺点,所以也被众多开发者认为是最理想的继承方式。

    以上就是JS里的六种继承方式的介绍,在编程实践中具体选取哪种方式还要根据当时情况来判定,适合的才是最好的,并一定非得使用组合式继承或者寄生组合式继承来完成继承。

  • 相关阅读:
    angular9的学习(十)
    本周学习总结
    本周学习总结
    angular9的学习(九)
    本周学习总结
    Web地图呈现原理
    小程序Canvas性能优化实战
    地图SDK全新版本v4.3.0上线
    硬核干货来了!手把手教你实现热力图!
    地图SDK全面升级 – 数十项新功能及优化等你来体验
  • 原文地址:https://www.cnblogs.com/syfwhu/p/4415586.html
Copyright © 2020-2023  润新知