继承就是一个对象可以访问另外一个对象的属性跟方法。比如现在有 A 跟 B两个对象，如果A继承了B，那么A就能访问B的方法跟属性

JavaScripy常见的继承方式：

  • 原型链继承
  • 构造函数继承（借助 call）
  • 组合继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承
  • ES6 calss 继承

    原型链继承

    原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针

    实例化原型对象的属性是引用类型的时候，数据互相影响

  1.  function Parent() {
  2.     this.name = 'parent1';
  3.     this.play = [1, 2, 3]
  4.   }
  5.  function Child() {
  6.     this.type = 'child2';
  7.   }
  8.   Child.prototype = new Parent();
  9.   console.log(new Child())
  10.   var s1 = new Child();
  11.   var s2 = new Child();
  12.   s1.play.push(4);
  13.   console.log(s1.play, s2.play); // [1,2,3,4]

改变s1的play属性，会发现s2也跟着发生变化了，这是因为两个实例使用的是同一个原型对象，内存空间是共享的

构造函数继承

借助 call调用Parent函数

原型链上的方法和属性没办法继承,只能继承父类的实例属性和方法，不能继承原型属性或者方法

  1. function Parent(){
  2.     this.name = 'parent1';
  3. }
  5. Parent.prototype.getName = function () {
  6.     return this.name;
  7. }
  9. function Child(){
  10.     Parent1.call(this);
  11.     this.type = 'child'
  12. }
  14. let child = new Child();
  15. console.log(child);  // 没问题
  16. console.log(child.getName());  // 会报错

组合继承

组合继承则将前两种方式继承起来

  1. function Parent3 () {
  2.     this.name = 'parent3';
  3.     this.play = [1, 2, 3];
  4. }
  6. Parent3.prototype.getName = function () {
  7.     return this.name;
  8. }
  9. function Child3() {
  10.     // 第二次调用 Parent3()
  11.     Parent3.call(this);
  12.     this.type = 'child3';
  13. }
  15. // 第一次调用 Parent3()
  16. Child3.prototype = new Parent3();
  17. // 手动挂上构造器，指向自己的构造函数
  18. Child3.prototype.constructor = Child3;
  19. var s3 = new Child3();
  20. var s4 = new Child3();
  21. s3.play.push(4);
  22. console.log(s3.play, s4.play);  // 不互相影响
  23. console.log(s3.getName()); // 正常输出'parent3'
  24. console.log(s4.getName()); // 正常输出'parent3'

原型式继承

主要借助Object.create方法实现普通对象的继承

  1. et parent4 = {
  2.     name: "parent4",
  3.     friends: ["p1", "p2", "p3"],
  4.     getName: function() {
  5.       return this.name;
  6.     }
  7.   };
  9.   let person4 = Object.create(parent4);
  10.   person4.name = "tom";
  11.   person4.friends.push("jerry");
  13.   let person5 = Object.create(parent4);
  14.   person5.friends.push("lucy");
  16.   console.log(person4.name); // tom
  17.   console.log(person4.name === person4.getName()); // true
  18.   console.log(person5.name); // parent4
  19.   console.log(person4.friends); // ["p1", "p2", "p3","jerry","lucy"]
  20.   console.log(person5.friends); // ["p1", "p2", "p3","jerry","lucy"]

这种继承方式的缺点也很明显，因为Object.create方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能

寄生式继承

寄生式继承在上面继承基础上进行优化，利用这个浅拷贝的能力再进行增强，添加一些方法

  1. let parent5 = {
  2.     name: "parent5",
  3.     friends: ["p1", "p2", "p3"],
  4.     getName: function() {
  5.         return this.name;
  6.     }
  7. };
  9. function clone(original) {
  10.     let clone = Object.create(original);
  11.     clone.getFriends = function() {
  12.         return this.friends;
  13.     };
  14.     return clone;
  15. }
  17. let person5 = clone(parent5);
  19. console.log(person5.getName()); // parent5
  20. console.log(person5.getFriends()); // ["p1", "p2", "p3"]

其优缺点也很明显，跟上面讲的原型式继承一样

寄生组合式继承

寄生组合式继承，借助解决普通对象的继承问题的Object.create 方法，在几种继承方式的优缺点基础上进行改造，这也是所有继承方式里面相对最优的继承方式

  1. function clone (parent, child) {
  2.     // 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程
  3.     child.prototype = Object.create(parent.prototype);
  4.     child.prototype.constructor = child;
  5. }
  7. function Parent6() {
  8.     this.name = 'parent6';
  9.     this.play = [1, 2, 3];
  10. }
  11. Parent6.prototype.getName = function () {
  12.     return this.name;
  13. }
  14. function Child6() {
  15.     Parent6.call(this);
  16.     this.friends = 'child5';
  17. }
  19. clone(Parent6, Child6);
  21. Child6.prototype.getFriends = function () {
  22.     return this.friends;
  23. }
  25. let person6 = new Child6(); 
  26. console.log(person6); //{friends:"child5",name:"child5",play:[1,2,3],__proto__:Parent6}
  27. console.log(person6.getName()); // parent6
  28. console.log(person6.getFriends()); // child5

es6 extend 继承

  1. class Person {
  2.   constructor(name) {
  3.     this.name = name
  4.   }
  5.   // 原型方法
  6.   // 即 Person.prototype.getName = function() { }
  7.   // 下面可以简写为 getName() {...}
  8.   getName = function () {
  9.     console.log('Person:', this.name)
  10.   }
  11. }
  12. class Gamer extends Person {
  13.   constructor(name, age) {
  14.     // 子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
  15.     super(name)
  16.     this.age = age
  17.   }
  18. }
  19. const asuna = new Gamer('Asuna', 20)
  20. asuna.getName() // 成功访问到父类的方法

总结

image.png
通过Object.create 来划分不同的继承方式，最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式，而 extends 的语法糖和寄生组合继承的方式基本类似