Class 中寄生组合式继承的巧妙之处

Class 的继承

在上一篇文章《ES6 系列 Babel 是如何编译 Class 的(上)》中，我们了解了 Babel 是如何编译 Class 的。在这篇文章中，我们将学习 Babel 是如何用 ES5 实现 Class 的继承。

在 ES6 中，Class 的继承使用 extends 。例如：

class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`);
  }
}

编译成 ES5 代码后，如下所示：

var Parent = (function () {
  function Parent(name) {
    this.name = name;
  }

  Parent.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name}`);
  };

  return Parent;
})();

var Child = (function (Parent) {
  function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
  }

  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;

  Child.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`);
  };

  return Child;
})(Parent);

从编译后的代码中，我们可以看出 Babel 是通过寄生组合式继承来实现 Class 的继承的。

寄生组合式继承

寄生组合式继承是一种常见的 JavaScript 继承方式。它结合了原型式继承和经典继承的优点，既可以实现多重继承，又可以避免经典继承中的一些问题。

寄生组合式继承的具体实现步骤如下：

1. 创建一个父类构造函数。
2. 创建一个子类构造函数，并继承父类构造函数。
3. 将子类原型指向父类原型的一个副本。
4. 在子类原型上添加自己的方法。

寄生组合式继承的优点在于：

1. 可以实现多重继承。
2. 可以避免经典继承中的一些问题，例如：父类构造函数被子类构造函数覆盖的问题。
3. 可以实现更灵活的代码重用。

寄生组合式继承的缺点在于：

1. 代码可能会变得复杂。
2. 可能会增加内存消耗。

总结

在本文中，我们学习了 Babel 是如何用 ES5 实现 Class 的继承的。我们还学习了寄生组合式继承的具体实现步骤和优缺点。希望这些内容能够帮助你更好地理解 Class 的底层实现原理。