前端面试：继承的实现方法有多少种？

原型和原型链！

1、原型

1、所有引用类型都有一个__proto__属性。
2、所有函数又都有一个prototype属性。
3、引用类型的__proto__指向函数的prototype

2、原型链

当访问对象的某个属性的时候，会现在这个属性对象本身上查找，如果没有找到的话就会去它的__proto__隐士原型链上查找，即它的构造函数prototype上查找，如果还是找不到就回去它的构造函数的prototype的__proto__中查找，这样一层一层的往上找就变为一个原型链。
如果直到最后都没找到返回null

如何实现继承？不同的继承方法分别有哪些优缺点？

第一种：原型链继承

利用原型链的特点进行继承

function Parent(){
    this.name = 'web';
    this.type = ['JS','vue','ts'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();

(1)：通过Parent构造函数的属性(即原型对象)设置Say方法，此时，Parent有2个属性和1个方法。
(2)：创建一个叫做Son的构造函数，称之为son构造函数。
(3)：设置Son的属性(即原型对象)值为父构造函数Parent的实例对象，即子构造函数继承了父构造函数的属性和方法。
(4)：对Son构造函数进行实例化，结果赋值给变量son1，即son1为实例对象，同样拥有2个属性和1个方法。
(5)：对Son构造函数进行实例化，结果赋值给变量son1，即son1为实例化对象，同样用于2个属性和1个方法。
缺点：

因为Son.prototype(即原型对象)继承了Parent实例化对象，这就导致了所有Son实例对象都一样，都共享有原型对象的属性和方法。代码如下

son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','VUE']

可以看出son1和son2都是相同的结果。
Son构造函数实例化对象无法进行参数的传递。

第二种：构造函数继承

通过构造函数call方法进行继承：

function Parent(){
    this.name = 'web前端';
    this.type = ['JS','HTML','CSS'];
}
function Son(){
    Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']

解释：
（1）：创建父级构造函数Parent，有name、type两个属性。
（2）：创建子级构造函数Son，函数内部通过call方法调用父级构造函数Parent，实现继承
（3）：分别创建构造函数Son的两个实例化对象son1、son2，对son1的type属性进行增加新的元素，son2没有新增，结果不一样，说明实现独立。
优点：
1、实现实例化对象的独立；
2、还可以给实例化对象添加新的参数

function Parent(name){
    this.name = name;
}
function Son(name){
    Parent.call(this,name);
}
son1 = new Son('JS');
console.log(son1);//JS
son2 = new Son('HTML');
console.log(son2);//HTML

缺点：
1、方法都在构造函数中定义，每次实例化对象都得创建一遍，基本无法实现复用。
2、call方法仅仅调用了父级构造函数的属性及方法，没有调用父级构造函数的原型对象中的方法。

第三种：组合继承（原型+构造）

特点：通过调用父类构造函数，继承父类属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数的复用。就是把上面两种方法结合起来。

function Person(name , age){
    this.name = name 
    this.age = age
    this.say = function () {
        console.log('Person我说话了！');
    }
}

Person.prototype.sing = function() {
    console.log('Person-sing');
}

function Student(name , age) {
    Person.call(this)
}

Student.prototype = new Person()
Student.prototype.constructor = Student //组合继承也是需要修复构造函数指向的
Student.prototype.sayHellow = function(){
    console.log('student say');
}

student1 = new Student('1',2)
student1.say()
student1.sayHellow()

第四种：class继承

es6引入class关键字，class可以通过extends关键字实现继承。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

class Father  {
    constructor(name , age){
        this.name = name 
        this.age = age
    }
    say(){
        console.log('father的 class');
    }
}
let father = new Father('1','2')

class Son extends Father{
    constructor(name , age){
        super(name , age)
    }
}

let son = new Son('45',55)
console.log(son);
son.say()