前端面试系列-JavaScript-继承的八种实现方案以及优缺点

柔情只为你懂 2022-11-12 13:52 204阅读 0赞

### 文章目录 ###

*  继承
 *   *  1.原型链继承
     *  2.构造函数式继承
     *  3.组合继承（常用）
     *  4.原型式继承
     *  5.寄生式继承
     *  6.寄生组合式继承
     *  7.Object.assign
     *  8. ES6类Extends

# 继承 #

继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。

function parentClass(name){
            this.name = name;
        }
    
        function sonClass(){
        }

## 1.原型链继承 ##

sonClass.prototype = new parentClass();

缺点：

1.  不能向构造函数传参
2.  引用类型的属性被所有实例共享

## 2.构造函数式继承 ##

使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类（不使用原型）

function sonClass(name){
         parentClass.call(this,name);
     }

缺点：

1.  方法都在构造函数中定义，每次创建实例都会创建一遍,无法实现复用
2.  只能继承父类的实例属性和方法，不能继承原型属性/方法

优点：  
3. 避免了引用类型的属性被所有实例共享(创建子类实例时调用父类构造函数，每个实例都会将父类中的属性复制一份。)  
4. 可以在 Child 中向 Parent 传参

例子：

function parentClass(age) {
        this.names = ['tom', 'jack'];
        this.age = age;
    }
    
    function sonClass(age) {
        parentClass.call(this, age);
    }
    
    var child1 = new sonClass(18);
    child1.names.push('mike');
    
    console.log(child1.names,child1.age);// ["tom", "jack", "mike"] 18
    
    var child2 = new sonClass(20);
    
    console.log(child2.names,child2.age); //["tom", "jack"] 20

## 3.组合继承（常用） ##

原型链继承和构造函数式继承组合。  
用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

function sonClass(name,age){
        parentClass.call(this,name); // 第二次调用parentClass()
        this.age = age;
    }
    sonClass.prototype = new parentClass();//第一次调用parentClass()
    sonClass.prototype.constructor = sonClass;// 重写sonClass.prototype的constructor属性，指向自己的构造函数sonClass

优点：融合原型链继承和构造函数式继承的优点，是 JavaScript 中最常用的继承模式。

缺点：父类的构造函数执行了两遍：一次在子类的构造函数中call方法执行一遍，一次在子类原型实例化父类的时候执行一遍。

## 4.原型式继承 ##

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

function createObj(o){
        function F(){}
        F.prototype = o;
        return new  F();
    }
    var son = createObj(parent);

缺点：

1.  和原型链继承一样，父类对象的引用类型值被共用。
2.  无法传递参数

## 5.寄生式继承 ##

在原型式继承的基础上，增强对象，返回构造函数  
主要作用是为构造函数新增属性和方法，以增强函数

function createObj (o) {
        var clone = Object.create(o);
        clone.sayName = function () {
            console.log('hi');
        }
        return clone;
    }

缺点（同原型式继承）：

1.  父类对象的引用类型值被共用。
2.  无法传递参数

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

结合借用构造函数传递参数和寄生模式实现继承

这是最成熟的方法，也是现在库实现的方法。

## 7.Object.assign ##

Object.assign会把 Parent原型上的函数拷贝到 Child原型上，使 Child的所有实例都可用 Parent的方法。它将返回目标对象，如果有重复的属性会被覆盖。

Object.assign(Child.prototype,Parent.prototype);
    Child.prototype.constructor = Child;

## 8. ES6类Extends ##

使用extends表明继承自哪个父类，并且在子类构造函数中必须使用super，可以看作是 Parent.call(this,value);

class Child extends parentClass{
        constructor(value){
            super(value);
            this.val = value;
        }
    }

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115172600][https_blog.csdn.net_qq_39903567_article_details_115172600]