javascript继承的实现方式总结

清疚 2022-05-19 10:11 207阅读 0赞

### 1.原型链继承（常用） ###

思想：利用原型让一个引用类型继承另一个引用类型的属性和方法  
特点：  
无法实现多继承（多继承即一个子类可以有多个父类，它继承了多个父类的特性。）  
无法实现传参  
能访问原型方法/原型属性  
不能继承实例属性和方法  
引用类型的属性被所有实例共享【缺点】

// 子类function Sub(){ 
        this.property = 'Sub Property'
    }
    Sub.prototype = new Super()
    // 注意这里new Super()生成的超类对象并没有constructor属性Sub.prototype.constructor = Sub

--------------------

### 2.构造继承（常用） ###

思想：在子类型构造函数的内部调用超类型的构造函数  
特点：  
可以实现多继承  
可以实现传参  
只能继承实例属性和方法  
不能继承原型方法/原型属性  
方法都在构造函数中定义，每次创建实例都会创建一遍方法。【缺点】

// 子类function Sub(){ 
        Super.call(this)    
        this.property = 'Sub Property'
    }

--------------------

### 3.组合继承（原型链和构造函数）（常用） ###

使用原型链实现对原型属性和方法的继承，通过使用构造函数实现对实例属性的继承  
特点  
集上面两者优点于一身  
组合继承最大的缺点是会调用两次父构造函数：一次是设置子类型实例的原型的时候，一次在创建子类型实例的时候。

// 子类function Sub(){    
        Super.call(this)    
    }
    Sub.prototype = new Super()
    // 注意这里new Super()生成的超类对象并没有constructor属性
    Sub.prototype.constructor = Sub

--------------------

### 4.拷贝继承（原型式继承） ###

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。  
思想：采用原型式继承并不需要定义一个类，传入参数obj，生成一个继承obj对象的对象  
特点：  
直接通过对象生成一个继承该对象的对象  
不是类式继承，而是原型式基础，缺少了类的概念  
包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。【缺点】

function objectCreate(obj){     
        function F(){ }    
        F.prototype = obj    
        return new F()
    }

--------------------

### 5.实例继承（寄生式继承） ###

思想：创建一个仅仅用于封装继承过程的函数，然后在内部以某种方式增强对象，最后返回对象  
特点：  
原型式继承的一种拓展  
依旧没有类的概念  
【缺点】跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

function objectCreate(obj){    
        function F(){ }    
        F.prototype = obj    
        return new F()
    }
    function createSubObj(superInstance){     
        var clone = objectCreate(superInstance)    
        clone.property = 'Sub Property'    
        return clone
    }

--------------------

### 6. 寄生组合式继承 ###

思想：结合寄生式继承和组合式继承，完美实现不带两份超类属性的继承方式  
特点：  
完美实现继承，解决了组合式继承带两份属性的问题  
过于繁琐，故不如组合继承  
例子：

function inheritPrototype(Super,Sub){    
    var superProtoClone = Object.Create(Super.prototype);       superProtoClone.constructor = Sub; 
    Sub.prototype = Super
    }
    function Sub(){    
        Super.call()    
        Sub.property = 'Sub Property'
    }
    inheritPrototype(Super,Sub)