JavaScript 实现继承的方式：原型链、组合式、寄生组合式

男娘i 2022-05-27 08:11 231阅读 0赞

# 原型链继承 #

let Parent = function() {
        this.name = [‘parent']
    }
    
    Parent.prototype.sayName = function() {
        console.log(this.name)
    }
    
    let Child = function(){}
    
    Child.prototype = new Parent() //原型式继承
    
    let child1 = new Child()
    child1.sayName() //[‘parent’]
    
    child1.name.push(‘child’) 
    let child2 = new Child()
    child2.sayName() //[‘parent’, ‘child']

## 问题： ##

*  所以实例共享**引用类型**的属性，一改都改;
 *  且创建 child 实例无法向 Parent 传参

# 组合式继承 #

这是 JavaScript 中最常用的继承模式。

let Parent = function(name){
        this.name = name
        this.staff = [‘a']
    }
    
    Parent.prototype.sayName = function(){
        console.log(this.name)
    }
    Parent.prototype.showStaff = function(){
        console.log(this.staff)
    }
    
    let Child = function(name){
        Parent.call(this, name) //借用 Parent 构造函数，实现向其传参 （第二次）
    }
    
    Child.prototype = new Parent() // 继承 Parent 原型上的方法 （第一次）
    
    let child1 = new Child(‘child1’)
    let child2 = new Child(‘child2’)
    
    child1.sayName() //child1
    child2.sayName() //child2
    
    child1.staff.push(‘child1’)
    child1.showStaff() //[‘a’, ‘child1’]
    child2.showStaff() //[‘a’]

## 问题： ##

两次调用 `Parent` 构造函数，分别让 `Child.prototype`、`child` 实例两个对象都有了 `Parent` 中的 `name`、`staff` 属性。

# 寄生组合继承 #

## 关键： ##

对于第一次调用，让 `Child.prototype` 有了 `Parent` 的属性，这是要避免的。

## 方法： ##

*  创建一个空的函数中转一下；
 *  让 `Child` 的原型 `Child.prototype` = 空函数的实例；
 *  让空函数的原型 `F.prototype = Parent.prototype`。

代码描述

let F = function() { };
    F.prototype = Parent.prototype;
    Child.prototype = new F();

由此，`child` 通过 `__proto__` 指向`Child.prototype` 即 `f` ，又通过 `__proto__` 指向 `F.prototype` 即 `Parent.prototype`

事实上，上面的思路就是 `Object.create()` 的实现

用代码描述：

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

由于 `Child.prototype = new F()` ，需要重新做 `constructor` 等指向，最后得

function inheritPrototype (subType, superType) { 
        let prototype = Object.create(superType.prototype)
        subType.prototype = prototype
        prototype.constructor = subType

## 寄生组合继承代码 ##

let Parent = function(name){ 
        this.name = name
        this.staff = [1]
    }
    
    Parent.prototype.sayName = function(){ 
        console.log(this.name)
    }
    
    Parent.prototype.showStaff = function(){ 
        console.log(this.staff)
    }
    
    let Child = function(name){ 
        Parent.call(this, name)
    }
    
    //Child.prototype = new Parent()
    
    function inheritPrototype (subType, superType) { 
        let prototype = Object.create(superType.prototype)
        subType.prototype = prototype
        prototype.constructor = subType
    }
    
    inheritPrototype(Child, Parent)
    
    let child1 = new Child(‘child1’)
    child1.sayName()
    let child2 = new Child(‘child2’)
    child2.sayName()
    child1.staff.push(2)
    child1.showStaff()
    child2.showStaff()

## 好处 ##

《JavaScript高级程序设计》表示：

> 这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype  
> 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和  
> isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

参考：[https://github.com/mqyqingfeng/Blog/issues/16][https_github.com_mqyqingfeng_Blog_issues_16]

[https_github.com_mqyqingfeng_Blog_issues_16]: https://github.com/mqyqingfeng/Blog/issues/16