JS 继承的前世今生

2023-10-27 00:56:01

JavaScript 继承的前世今生

JavaScript 中的继承是一门复杂的艺术，涉及到多种不同的技术。在本文中，我们将探讨 JavaScript 继承的前世今生，从构造函数继承到原型继承，再到组合继承和寄生式继承。我们将逐一 بررسی 这些技术的优缺点，并帮助您选择最适合您需求的继承技术。

构造函数继承

构造函数继承是最简单、最直接的继承方式。它允许您创建一个子类，该子类继承父类的属性和方法。要创建子类，您只需创建一个新的构造函数，并在其中调用父类的构造函数。例如：

function Parent() {
  this.name = "John";
}

function Child() {
  Parent.call(this);
  this.age = 20;
}

const child = new Child();
console.log(child.name); // John
console.log(child.age); // 20

构造函数继承的主要优点是简单易用。但是，它也有一些缺点。首先，它会导致代码重复。因为您需要在子类的构造函数中复制父类构造函数的代码。其次，它使得子类与父类紧密耦合。这意味着如果父类发生变化，子类也需要随之改变。

原型继承

原型继承是另一种常见的继承方式。它允许您创建一个子类，该子类继承父类的原型对象。要创建子类，您只需创建一个新的对象，并将父类的原型对象分配给该对象的原型对象。例如：

function Parent() {
  this.name = "John";
}

function Child() {
  this.__proto__ = Parent.prototype;
  this.age = 20;
}

const child = new Child();
console.log(child.name); // John
console.log(child.age); // 20

原型继承的主要优点是它可以避免代码重复。因为您不必在子类的构造函数中复制父类构造函数的代码。此外，它使得子类与父类松散耦合。这意味着如果父类发生变化，子类不必随之改变。

组合继承

组合继承是构造函数继承和原型继承的组合。它允许您创建一个子类，该子类继承父类的属性和方法，同时也继承父类的原型对象。要创建子类，您只需创建一个新的构造函数，并在其中调用父类的构造函数，然后将父类的原型对象分配给该对象的原型对象。例如：

function Parent() {
  this.name = "John";
}

function Child() {
  Parent.call(this);
  this.age = 20;
}

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

const child = new Child();
console.log(child.name); // John
console.log(child.age); // 20

组合继承结合了构造函数继承和原型继承的优点。它可以避免代码重复，也可以使子类与父类松散耦合。但是，它也比构造函数继承和原型继承都要复杂。

寄生式继承

寄生式继承是一种不使用构造函数或原型继承的继承方式。它允许您创建一个子类，该子类继承父类的属性和方法。要创建子类，您只需创建一个新的对象，并将父类对象分配给该对象。例如：

function Parent() {
  this.name = "John";
}

function Child() {
  const parent = new Parent();
  return Object.assign(this, parent);
}

const child = new Child();
console.log(child.name); // John