在 JS 中巧妙地实现继承：三种方案详解与优缺点对比

2023-11-12 11:56:49

前言

在 JavaScript 中，继承是一种重要的概念，它允许我们创建新的对象，并继承自父对象或基类的属性和方法。在本文中，我们将探讨三种常用的 JS 继承方法：原型链、构造函数和 ES6 中引入的类。我们会深入分析每种方法的原理和优缺点，并通过代码示例来说明它们的应用。

1. 原型链继承

原型链继承是 JavaScript 中最基本、最简单的继承方式。它通过创建一个新的对象，并将其原型属性指向父对象来实现继承。父对象原型上的属性和方法都可以被子对象访问和使用。

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

Parent.prototype.greet = function() {
  console.log(`Hello from ${this.name}`);
};

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

// 将 Child.prototype 的原型属性指向 Parent.prototype
Child.prototype = Object.create(Parent.prototype);

const child = new Child();
child.greet(); // 输出: Hello from Child

2. 构造函数继承

构造函数继承是另一种常见的 JavaScript 继承方式。它通过在子类的构造函数中调用父类的构造函数来实现继承。父类构造函数中的属性和方法会被子类继承。

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

Parent.prototype.greet = function() {
  console.log(`Hello from ${this.name}`);
};

function Child(name) {
  // 在子类的构造函数中调用父类的构造函数
  Parent.call(this, name);
}

// 将 Child.prototype 的原型属性指向 Parent.prototype
Child.prototype = Object.create(Parent.prototype);

const child = new Child("Child");
child.greet(); // 输出: Hello from Child

3. ES6 类继承

ES6 中引入了新的类语法，为 JavaScript 提供了更简洁、更面向对象的继承方式。类继承与构造函数继承非常相似，但语法更加简洁。

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

  greet() {
    console.log(`Hello from ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name) {
    // 在子类的构造函数中调用父类的构造函数
    super(name);
  }
}

const child = new Child("Child");
child.greet(); // 输出: Hello from Child

优缺点对比

继承方式	优点	缺点
原型链继承	简单、易于理解	容易造成原型链污染，性能开销较高
构造函数继承	性能优于原型链继承	语法冗长，代码可读性较差
ES6 类继承	语法简洁、面向对象性强	不兼容旧版本 JavaScript 引擎