JavaScript 继承的六种实现方法

2023-10-05 16:16:13

JavaScript 继承的六大支柱：揭秘对象继承的奥秘

摘要

JavaScript 中的继承机制至关重要，它赋予我们创建新对象并从中获取属性和方法的能力，从而实现代码重用和对象创建的灵活性。本文将深入探讨六种独特的 JavaScript 继承方法，揭开它们各自的特点、优缺点以及最佳应用场景。

原型链：继承的基石

想象一下原型链就像一个祖传的珠串，每个对象都是链上的一个珠子，继承了它祖先的属性和方法。当一个对象试图访问一个它自身不具备的属性或方法时，JavaScript 会沿着原型链向上追溯，直到找到该属性或方法。

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

Parent.prototype.sayHello = function() {
  console.log("Hello from Parent");
};

function Child() {
  this.name = "Child";
}

// Child 继承 Parent
Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出 "Hello from Parent"

构造函数：显式继承

构造函数就像对象诞生的助产士，它负责初始化一个新对象的属性和方法。要实现继承，子对象的构造函数必须明确调用父对象的构造函数。

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

Parent.prototype.sayHello = function() {
  console.log("Hello from Parent");
};

function Child() {
  // 调用 Parent 构造函数
  Parent.call(this);
  this.name = "Child";
}

const child = new Child();
child.sayHello(); // 输出 "Hello from Parent"

类：语法糖的魅力

类是一种语法糖，本质上等同于使用构造函数实现继承。它的主要优点是提供了更简洁直观的继承语法。

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

  sayHello() {
    console.log("Hello from Parent");
  }
}

class Child extends Parent {
  constructor() {
    // 调用 Parent 构造函数
    super();
    this.name = "Child";
  }
}

const child = new Child();
child.sayHello(); // 输出 "Hello from Parent"

实例：轻量级的继承

实例是一种特殊对象，通过 Object.create() 方法继承另一个对象的属性和方法，提供了一种更轻量级的继承方式。

const parent = {
  name: "Parent",
  sayHello() {
    console.log("Hello from Parent");
  }
};

// Child 继承 Parent
const child = Object.create(parent);
child.name = "Child";

child.sayHello(); // 输出 "Hello from Parent"

组合继承：结合优势

组合继承融合了原型链和构造函数两种方法，实现了它们的优势。它在子对象的原型对象上设置父对象的实例，并在子对象的构造函数中调用父对象的构造函数。

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

Parent.prototype.sayHello = function() {
  console.log("Hello from Parent");
};

function Child() {
  // 调用 Parent 构造函数
  Parent.call(this);
  this.name = "Child";
}

// Child 继承 Parent
Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出 "Hello from Parent"

寄生组合继承：灵活性之选

寄生组合继承结合了组合继承和实例两种方法，提供了最大的灵活性。它使用 Object.create() 方法创建子对象，继承父对象的属性和方法，然后添加子对象自己的属性和方法。

const parent = {
  name: "Parent",
  sayHello() {
    console.log("Hello from Parent");
  }
};

// Child 继承 Parent
const child = Object.create(parent);
child.name = "Child";

child.sayHello(); // 输出 "Hello from Parent"

比较：量身定做的选择

每种继承方法都有其独特的优点和缺点，适合不同的场景。

方法	优点	缺点
原型链	简单易懂	不直观
构造函数	直观	需要显式调用父构造函数
类	语法糖	需要使用 `super`
实例	轻量级	不直观
组合继承	直观	需要显式调用父构造函数
寄生组合继承	灵活性	不直观