关于前端继承的几种方式

es6中class的到来无疑是一大利器，让之前的继承不在是麻烦事只需要extends即可。

回忆es5继承的方式（原型链继承、构造函数继承、组合式继承、原型式继承、寄生式继承、寄生组合式继承）

一、原型链继承

原理： 将父类的实例(new Person())作为子类的原型对象(Student.prototype)

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.hobby = ["吃饭", "睡觉"];
}
Person.prototype.sayHello = function() {
    console.log("Hello Person")
}
function Student(_class) {
  this.class = _class;
}

Student.prototype = new Person()
Student.prototype.constructor = Student

let stu = new Student("塔利班")
let stu1 = new Student()
stu.hobby.push("玩")
stu1.hobby.push("乐")
console.log(stu.hobby) ["吃饭", "睡觉", "玩", "乐"]
stu.sayHello() //Hello Person
stu.name //undefined
stu.age //undefined
stu.class // 塔利班

缺点：

1.子类的构造函数指向出现错误，需要手动修改 （Student.prototype.constructor = Student）重新指回原构造函数。

2.若父类中存在引用类型的属性，继承者实例们共享该引用属性，一个修改，其他继承者的该属性值也会跟随改变。

3.子类实例对象无法向父类构造函数传参。

二、构造函数继承

原理：在子类构造函数调用父类构造函数，并使用call/apply修改父类构造函数的this指向 此种方式摒弃原型链继承存在的实例化时无法向父类传参的问题。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.hobby = ["吃饭", "睡觉"];
}
Person.prototype.getHobby = function () {
  console.log(this.hobby)
}

function Student(name, age, _class) {
  Person.call(this, name, age)
  this.class = _class;
}

let stu = new Student("内塔尼亚大cs",56,"地狱18班")
console.log(stu.name, stu.age) //内塔尼亚大cs 56
stu.getHobby() // Error stu.getHobby is not a function

缺点：

1.只能访问父类实例上的属性或方法，不能够访问父类原型对象上的属性方法。

2.子类实例对象身上会出现父类实例对象的属性方法的副本，这显然是没有必要的

三、组合式继承

原理：原型链继承与构造函数继承的组合。 此种方式，无疑摒弃了原型链继承与构造函数继承存在的弊端，既可以实例化时传参，还可以访问父类原型对象身上的属性或方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.hobby = ["吃饭", "睡觉"];
}
Person.prototype.getHobby = function () {
  console.log(this.hobby)
}

function Student(name, age, _class) {
  Person.call(this, name, age)
  this.class = _class;
}

Student.prototype = new Person()
Student.prototype.constructor = Student

let stu = new Student("内塔尼亚大cs",56,"地狱18班")
let stu1 = new Student()
stu.getHobby() // ["吃饭", "睡觉"]
stu.hobby.push("玩")
stu1.hobby.push("乐")
console.log(stu.name, stu.age, stu.class, stu.hobby) //内塔尼亚大cs  56  地狱18班  ["吃饭", "睡觉","玩"]

缺点：

1.执行两次Person构造函数 Person.call(this, name, age)一次， Student.prototype = new Person()一次

2.子类实例对象上会存在父类实例对象的属性或方法的副本，其原型对象是父类实例对象，若将子类实例副本属性删除后，再次调用该属性依然存在，这就会造成问题

四、原型式继承

原理： 不采用构造函数的形式，利用对象将被继承的对象(obj)作为子类的原型。

const obj = {
  name: "内塔尼亚小瘪三",
  age: 56,
  hobby: ["吃饭", "睡觉"]
}

function Student( _class) {
  const stuObj = Object.create(obj)
  stuObj.class = _class
  return stuObj
}
let stu1 = new Student("地狱18班")
let stu2 = new Student()
stu1.hobby.push("玩")
stu2.hobby.push("乐")
console.log(stu1.name, stu1.age, stu1.hobby) // 内塔尼亚小瘪三 56  ["吃饭", "睡觉", "玩", "乐"]

缺点：

1.引用类型的属性共享， 多个实例对象共享一个引用地址，一个被修改，其他都进行改变

五、寄生式继承

原理： 创建新对象，浅拷贝一份目标对象（这一步也就是原型式继承方式）,在对新对象进行增强，添加一些处理方法。

const obj = {
  name: "内塔尼亚小瘪三",
  age: 56
}

function Student( _class) {
  const stuObj = Object.create(obj)
  stuObj.class = _class
  stuObj.extendsType = function() {
    console.log("采用的是寄生式继承方式")
  }
  return stuObj
}
let stu = new Student("地狱18班")
console.log(stu.name, stu.age, stu.class) // 内塔尼亚小瘪三 56 地狱18班
stu.extendsType() //采用的是寄生式继承方式

缺点：

1.其本质就是原型式继承，所以所有实例对象共享同一个引用类型属性地址，存在引用问题

六、寄生组合式继承

原理： 创建父类原型副本，再将副本赋值给子类原型对象，最后通过构造函数继承方式在子类构造函数中调用父类构造函数并将其this指向修改为子类实例对象。 此方式解决了调用两次父类构造函数的问题，并解决其父类引用方法共享相互影响问题，同时避免了子类原型对象上的重复的属性或方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.show = function() {
    console.log("Hello Person")
}

function Student(name, age, _class) {
    Person.call(this, name, age)
    this.class = _class;
}

const prototype = Object.create(Person.prototype)
Student.prototype = prototype
Student.prototype.constructor = Student

let stu = new Student("内塔尼亚小瘪三",56,"地狱18班")
stu.show()
console.log(stu.name, stu.age, stu.class, stu)

缺点：

1.比较繁琐，三种方式的结合体

七、es6类继承

原理： 封装的class，创建类，并通过extends实现继承。

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    show() {
        console.log("Hello Person");
    }
}
class Student extends Person {
    constructor(name, age, _class) {
        super(name, age);
        this.class = _class;
    }
    readBook() {
        console.log("将进酒，杯莫停，与君歌一曲")
    }
}

let stu = new Student("内塔尼亚小瘪三",56,"地狱18班")
stu.show()
console.log(stu.name, stu.age, stu.class, stu)

优点：

1.语法简单，易书写