继承

作者: 阿布朗迪 | 来源:发表于2019-06-22 11:50 被阅读0次

    引言

    继承是OO语言中一个最为人津津乐道的概念。大部分的OO语言中都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。在ECMAScript中实现继承的方式主要依靠原型链来实现的。

    原型链

    基本思想: 利用原型让一个引用类型继承另一个引用类的属性和方法。

        function SuperType(){
            this.property = true;
        }
        SuperType.prototype.getSuperValue = function(){
            return this.property;
        }
        function SubType(){
            this.subproperty = false;
        }
        SubType.prototype = new SuperType();
        SubType.prototype.getSubValue = function(){
            return this.subproperty;
        }
        var instance = new SubType();
        alert(instance.getSuperValue())
    

    如何确定原型和实例的关系?

    有两种方式去确定原型和实例之间的关系。
    1.使用instanceof操作符。
    instanceof 的作用是用来测试实例与原型中出现过的\color{gray}{构造函数},他的结果会返回 true。接着上面的例子继续

        console.log(instance instanceof Object)      //true
        console.log(instance instanceof SuperType)   //true
        console.log(instance instanceof SubType)     //true
    
    1. 使用 isPrototypeof() 方法。
      只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。也会返回true
       console.log(Object.prototype.isPrototypeOf(instance))          //true
       console.log(SuperType.prototype.isPrototypeOf(instance))       //true
       console.log(SubType.prototype.isPrototypeOf(instance))         //true
    

    原型链的问题

    1.包含引用类型值的问题。在通过原型来实现继承是,原型实际上会变成另一个类型的实例,达到共享。
    2.没有办法在不影响所有对象实例的情况下,向上给构造函数传递参数。

    构造函数继承

    为了解决上述原型链问题1,我们可以借用构造函数解决问题并且使用call()applay() 可以在新创建的对象上执行构造函数。

        function SuperType(){
            this.colors = ['red','green','blue']
        }
        function Subtype(){
            SuperType.call(this)
        }
        var instance = new Subtype()
        instance.colors.push('yellow')
        console.log(instance.colors)    // ["red", "green", "blue", "yellow"]
    
        var instance2 = new Subtype()
        console.log(instance2.colors)  // ["red", "green", "blue"]
    

    为了解决上述问题2,如何向上传构造函数传递参数呢?如下:

        function SuperType(name) {
            this.name = name;
        }
        function SubType(){
            SuperType.call(this,'ymiandi')
            this.age = 25
        }
        var instance = new SubType()
        console.log(instance.name)   // ymianid
        console.log(instance.age)    // 25
    

    借用构造函数的问题

    使用构造函数存在方法都在构造函数中定义,这样会增加函数复用。

    组合继承

        function SuperType(name) {
            this.name = name
            this.colors = ['red','green','blue']
        }
        SuperType.prototype.sayName = function(){
            console.log(this.name)
        }
        function SubType(name,age){
            SuperType.call(this,name)
            this.age = age
        }
        //继承方法
        SubType.prototype = new SuperType()
        SubType.prototype.constructor = SubType
        SubType.prototype.sayAge = function(){
            console.log(this.age)
        }
    
        var instance1 = new SubType('ershuai',24)
        instance1.colors.push('yellow')
        console.log(instance1.colors)  //["red", "green", "blue", "yellow"]
        instance1.sayName()//ershuai
        instance1.sayAge() //24
    
        var instance2 = new SubType('ymd',25)
        console.log(instance2.colors)  //["red", "green", "blue"]
        instance2.sayName()  // 'ymd
        instance2.sayAge()   // 25
    

    原型式继承

    道格拉斯·克罗克福德采用的一种方法。借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。给下如下函数:

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

    在object()函数内部,先创建了一个临时性的构造函数,然后西安传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。从本质上讲,object() 对传入其中的对象执行了一次浅拷贝。

        var person = {
            name : 'ymiand',
            friends: ['qqqq','wwwww','oooo']
        }
        var anotherPerson = Object.create(person,{
            name: {
                value: 'Greg'
            }
        })
        var anotherPerson = object(person);
        anotherPerson.name = 'Greg'
        anotherPerson.friends.push('ttttt')
    
        var yerAnotherPerson = object(person)
        yerAnotherPerson.name = 'Linda'
        yerAnotherPerson.friends.push('Bar')
    
        console.log(person.friends)
    

    在ECMAScript5 中通过新增Object.create() 方法规范了原型式继承。

        var person = {
            name : 'ymiand',
            friends: ['qqqq','wwwww','oooo']
        }
        var anotherPerson = Object.create(person,{
            name: {
                value: 'Greg'
            }
        })
            console.log(anotherPerson.name)
    

    寄生式继承

    寄生式继承是与原型式继承紧密相关的一种思路。
    寄生式继承的思路与寄生构造函数和工厂模式类似。即创建一个仅用封装继承过程的函数,该函数在内容以某种方式增强对象,最后再返回对象

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

    寄生组合式继承

    通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
    寄生组合式继承模式基本模式如下:

    function inheritPrototype(subType,SuperType){
        var prototype = object(SuperType.prototype) //创建对象
        prototype.constructor = subType;//增强对象
        subType.prototype = prototype;//指定对象
    }
    

    ES6 class 继承

        class Parent {
            constructor(){
                this.x = 'aaa'
            }
        }
    
        class Son extends Parent{
            constructor(){
                super()
            }
        }
        
         console.log(new Son())
    

    相关文章

      网友评论

          本文标题:继承

          本文链接:https://www.haomeiwen.com/subject/bxkuqctx.html