一、常见的几种继承方式

  • 原型链继承
  • 构造函数继承
  • 组合继承
  • 原型式继承
  • 寄生继承
  • 寄生组合继承

  • extends 继承

    二、常见继承方式的优缺点

    1 - 原型链继承

  • 实现：手动绑定父类对象为子类的原型链，使用new关键字实例化子类

  • 关键：子类和父类都是构造函数，不是具体的字面量表达式 ```javascript // 父类构造函数 function Parent1(){ this.name=’parent1’; this.friends = [‘Tom’,’Joly’,’Tim’]; } // 子类构造函数 function Child1(){ this.age = 12; } // 子类的原型 = 父类对象 Child1.prototype = new Parent1();

// 子类实例化 let child1 = new Child1(); console.log(child1.friends); // [‘Tom’,’Joly’,’Tim’] let child1_2 = new Child1(); child1_2.friends.push(“test”); console.log(child1.friends); // [ ‘Tom’, ‘Joly’, ‘Tim’, ‘test’ ] console.log(child1_2.friends); // [ ‘Tom’, ‘Joly’, ‘Tim’, ‘test’ ]

  2. - 缺点：多个实例对象之间共享一个原型对象，当某个实例修改了原型对象中的数据时，其他的实例也随之改变。
  3. <a name="BIoWY"></a>
  4. ### 2 - 构造函数继承
  6. - 实现：在子类的构造函数中硬绑定this指针的指向，从而在子类中也可以访问父类的属性和方法
  7. - 关键：父类和子类都是构造函数的形式
  8. - 缺点：子无法继承父类原型上的属性。
  9. ```javascript
  10. // 父类构造函数
  11. function Parent2(){
  12.   this.name = 'Parent2';
  13.   this.friends = ['Tom','Joly','Tim'];
  14. }
  15. Parent2.prototype.getName = function (){
  16.   return this.name
  17. };
  18. Parent2.prototype.type = "type";
  19. // 子类构造函数
  20. function Child3(){
  21.   // 在子类构造函数中修改父类this指针的指向
  22.   Parent2.call(this);
  23.   this.age = 12;
  24. }
  25. // 实例化子类
  26. const child2 = new Child3();
  27. console.log(child2);
  28. console.log(child2.type) // undefined

3 - 组合继承

  • 实现：集合了原型链继承和构造函数继承
  • 关键：父类和子类都是构造函数形式

  • 缺点：在子类中调用了两遍父类，影响性能问题。使得子类中的属性重复。

    1. // 父类
    2. function Parent3(){
    3. this.name = 'Parent3';
    4. this.friends = ['Tom','Joly','Tim'];
    5. }
    6. Parent3.prototype.getName = function (){
    7. return this.name;
    8. }
    9. // 子类
    10. function Child3(){
    11. // 在子类中使用构造函数继承继承父类的自有属性
    12. Parent3.call(this);
    13. this.age = 12;
    14. }
    15. // 通过原型链继承，继承父类的原型链上的属性
    16. Child3.prototype = new Parent3();
    17. // 因为修改了prototype的指向，所以需要手动绑定constructor指针
    18. Child3.prototype.constructor = Child3;
    19. let child3_1 = new Child3();
    20. let child3_2 = new Child3();
    21. console.log(child3_1); //  { name: 'Parent3', friends: [ 'Tom', 'Joly', 'Tim' ], age: 12 }
    22. console.log(child3_2); //  { name: 'Parent3', friends: [ 'Tom', 'Joly', 'Tim' ], age: 12 }
    23. child3_1.friends.push("test");
    24. console.log(child3_1.friends); //  [ 'Tom', 'Joly', 'Tim', 'test' ]
    25. console.log(child3_2.friends); //  [ 'Tom', 'Joly', 'Tim' ]

    image.png

    4 - 原型式继承

  • 实现：直接通过父对象创建子对象，使用object.create 实现原型继承

  • 关键：父对象是字面量对象
  • 缺点：多个子对象之间共享一个原型对象 ```javascript let parent4 = { name:’parent4’, friends:[‘Tom’,’Joly’,’Tim’], getName(){ return this.name } }; let child42_1 = Object.create(parent4); let child42_2 = Object.create(parent4); child42_1.friends.push(“child43_1”); child42_2.friends.push(“child42_2”) console.log(child42_2.friends); // [ ‘Tom’, ‘Joly’, ‘Tim’, ‘child43_1’, ‘child42_2’ ] console.log(child42_1.friends); // [ ‘Tom’, ‘Joly’, ‘Tim’, ‘child43_1’, ‘child42_2’ ]
  1. <a name="MSP8K"></a>
  2. ### 5 - 寄生式继承
  4. - 实现：寄生式继承在原型式继承的基础上新增了更多了方法
  5. - 关键：父对象是字面量对象
  6. - 缺点：多个子对象共享一个对象
  7. <a name="C9rFJ"></a>
  8. ### 6 - 寄生组合式继承
  10. - 实现：基于组合继承的方式，使用Object.create() 代理 new 的原型链继承实现
  11. - 关键：父类和子类是构造函数
  12. - 目前主流的继承方式
  13. ```javascript
  14. // 父类构造函数
  15. function Parent6(){
  16.   this.name = 'Parent6';
  17.   this.friends = ['Tom','Joly','Tim'];
  18. }
  19. Parent6.prototype.getName = function (){
  20.   return this.name;
  21. }
  22. // 子类构造函数
  23. function Child6(){
  24.   // 在子类中通过构造函数继承继承父类的自有属性
  25.   Parent6.call(this);
  26.   this.age = 12;
  27. }
  28. // 通过Object.create创建包含父类原型的新对象
  29. // 对组合继承的改进，防止执行两遍父类并且在子类中有重复的属性
  30. Child6.prototype = Object.create(Parent6.prototype);
  31. Child6.prototype.constructor = Child6;
  32. Child6.prototype.getFriend = function (){
  33.   return this.friends;
  34. }
  36. let child6_1 = new Child6();
  37. let child6_2 = new Child6();
  38. child6_1.friends.push("child6_1");
  39. child6_2.friends.push("child6_2");
  40. console.log(child6_1.getFriend()); // [ 'Tom', 'Joly', 'Tim', 'child6_1' ]
  41. console.log(child6_2.getFriend()); // [ 'Tom', 'Joly', 'Tim', 'child6_2' ]

7 - ES6 中 extends 继承

  1. class Parent7{
  2.   constructor(name) {
  3.     this.name = name
  4.   }
  5.   getName(){
  6.     return this.name
  7.   }
  8. }
  10. class Child7 extends Parent7{
  11.   constructor(name,age) {
  12.     super(name);
  13.     this.age = age;
  14.   }
  15. }
  16. const child7 = new Child7("tim",27);
  17. console.log(child7.getName());
  • extends 关键字的注意事项：
    • 在子类的构造函数中必须调用 super()关键字来初始化父类的属性和方法
    • 如果子类中没有显示声明constructor，则super会被默认添加
    • 在子类的构造函数中，只有调用了super后才可以使用this指针。因为子类的构建基于父类的实例。