js中继承的7种方法

1.原型链继承

核心思想是构造函数，实例对象以及原型这三者的关系

// 原型链继承
        function Person(){
            this.name = "张大宝";
        }
        Person.prototype.getName = function(){
            console.log(this.name);
        }
        function Student(){           
        }
        Student.prototype = new Person();
        var student = new  Student();
        student.getName(); // 张大宝

缺点：
1.原型链中引用类型的属性会被所有实例共享的，即所有实例对象使用的是同一份数据，会相互影响。

function Person(){
            this.colors = ["red", "green", "pink"];
        }
        function Student(){
        }
        Student.prototype = new Person();
        var a1 = new Student();
        var a2 = new Student();
        a1.colors.push("white");
        console.log(a2.colors);    //"red", "green", "pink" ,"white"

2.在创建子类的实例时，不能向超类传参(无法向父级构造函数传参)

2.借用构造函数（经典继承）

核心思想是：在子级构造函数中调用父级构造函数。
如何实现在一个构造函数中调用另一个函数？——call()和apply()

// 借用构造函数继承（经典继承）
        function Person(){
            this.name = "张大宝";
            this.colors = ["red", "green", "pink"]];
        }
        Person.prototype.getName = function(){
            console.log(this.name);
        }
        function Student(){
            Person.call(this);
        }
        var a1 = new Student();
        var a2 = new Student();
        a1.colors.push("white");
        console.log(a1.name);
        console.log(a1.colors); // ["red", "green", "pink", "white"]
        console.log(a2.colors); // ["red", "green", "pink"]

优点：
1.避免了引用类型的属性被所有实例共享
2.可以在子类中向超类传参
缺点:
1.只能继承父类的私有的属性和方法，不能继承原型上的属性和方法;
2.无法实现构造函数的复用，每个子类都有父类实例函数的副本，影响性能，代码会臃肿。

3.组合继承

组合继承 = 原型链 + 借用构造函数。取其长避其短：共享的用原型链，各自的借用构造函数
核心思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样，既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它自己的属性。

function Parent(name){
            this.name = name;
            this.colors = ["red", "green", "pink"];
        }
        Parent.prototype.getName = function(){
            console.log(this.name);
        }
        function Student(name,age){
            Parent.call(this,name);// 第二次调用 Parent()
            this.age = age;
        }
        Student.prototype = new Parent(); // 第一次调用 Parent()
        var a1 = new Child("张大宝",18);
        var a2 = new Child("张小宝",19);
        a1.getName(); //张大宝
        a2.getName();// 张小宝
        console.log(a1.age); // 18
        console.log(a2.age); // 19
        child1.colors.push("white");
        console.log(a1.colors);  // ["red", "blue", "green", "white"]
        console.log(a2.colors); // ["red", "blue", "green"]
        console.log(a1 instanceof Child); // true
        console.log(a2 instanceof Parent); // true

优点：融合原型链继承和构造函数的优点，是JavaScript中最常用的继承模式
缺点：调用了两次父类构造函数
（组合继承最大的问题是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部）

4.原型式继承

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

// 原型式继承
function createObj(o){
    function F(){}
    F.prototype = o;
    return new F()
}

var person = {
    name:"张大宝",
    colors:["red","pink","green"]
}
var a1 = createObj(person)
a1.name = "张小宝"
a1.colors.push = "white"
console.log(a1.name)    // 张小宝
console.log(a1.colors)    // "red","pink","green","white"
var a2 = createObj(person)
console.log(a2.name)    // 张大宝
console.log(a2.colors)     // "red","pink","green","white"

找对象上的属性时，总是先找实例上对象，没有找到的话再去原型对象上的属性。实例对象和原型对象上如果有同名属性，总是先取实例对象上的值
缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样
ECMAScript5通过新增Object.create()方法规范化了原型式继承，这个方法接收两个参数:
一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。
上面的代码还可以这样写：
在传入一个参数的情况下，Object.create()与createObj()方法的行为相同

var person = {
    name:"张大宝",
    colors:["red","pink","green"]
}
var a1 = Object.create(person)
a1.name = "张小宝"
a1.colors.push = "white"
console.log(a1.name)    // 张小宝
console.log(a1.colors)    // "red","pink","green","white"
var a2 = Object.create(person)
console.log(a2.name)    // 张大宝
console.log(a2.colors)     // "red","pink","green","white"

Object.create()方法的第二个参数与object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的

var a1 = Object.create(person,{
  name:{
        value:"张二宝"
});
console.log(a1.name);  //  张二宝

5.寄生式继承

在原型式继承的基础上，在函数内部丰富对象

function fun(obj) {
    function Son() { };
    Son.prototype = obj;
    return new Son();
}
function JiSheng(obj) {
    var clone = fun(obj);    //  通过调用函数创建一个新对象
    clone.Say = function () {    //  以某种方式来增强这个对象
        console.log('我是新增的方法');
    }
    return clone;    //  返回这个对象
}
var parent = {
    name: '张三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

优缺点：跟借用构造函数类似，调用一次函数就得创建一遍方法，无法实现函数复用，效率较低。

6.寄生组合式继承

利用组合继承和寄生继承各自优势
寄生组合式继承，是集寄生式继承和组合继承的有点与一身，主要是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。它的缺点是两次调用父级构造函数，一次是在创建子级原型的时候，另一次是在子级构造函数内部，那么我们只需要优化这个问题就行了，即减少一次调用父级构造函数，正好利用寄生继承的特性，继承父级构造函数的原型来创建子级原型。

function JiSheng(son,parent) {
    var clone = Object.create(parent.prototype);//创建对象
    son.prototype = clone;      //指定对象
    clone.constructor = son;     //增强对象
}
function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

优缺点：组合继承优点、寄生继承的优点，目前JS继承中使用的都是这个继承方法

7.ES6里的extends继承

class People{
        constructor(name){
            this.name = name;
        }
        walk(){
            console.log(this.name + "会走路");
        }
    }
    class Student extends People{
        constructor(name){
            super();//调用了父类的构造函数
            this.name = name;
        }

    }
    var ZhangDaoBao = new Student("张大宝");
    ZhangDaoBao.walk();//张大宝会走路