ES6 之中 JavaScript 实现继承完全解析

前端

2023-12-19 04:14:38

JavaScript 继承：从原型链到 ES6 class

在现代编程范式中，继承是面向对象编程的基石。在 JavaScript 中，继承机制在 ES6 之前和之后发生了重大转变，这篇文章将深入探讨这些变化，帮助你深入理解 JavaScript 中继承的实现原理。

ES6 之前的继承：原型链

在 ES6 之前，JavaScript 中的继承依赖于原型链机制。原型链是一种特殊的对象链接机制，允许子对象访问父对象的属性和方法。当创建一个子对象时，该对象自动继承其父对象的原型，从而获得父原型上的属性和方法。这种继承方式称为原型继承。

虽然原型继承是 JavaScript 中实现继承的一种有效方法，但它也存在一些局限性：

难以理解： 原型链的实现方式复杂，新手程序员可能难以理解其工作原理。
容易出错： 由于子对象共享父对象的原型，因此对父原型所做的任何更改都会影响所有子对象，这可能会导致意外的行为。
不支持私有继承： 原型链不支持私有继承，这意味着子对象可以访问父对象的私有属性和方法，这违背了面向对象编程的封装原则。

ES6 中的继承：class

为了解决原型继承的局限性，ES6 引入了 class ，它允许我们使用更简洁直观的语法定义类和实例。在 ES6 中，继承是通过 extends 关键字实现的。当一个子类使用 extends 关键字继承父类时，子类将自动获取父类的所有属性和方法。

除了 extends 关键字，ES6 还引入了 super 关键字，它允许子类访问父类的构造函数和方法。通过使用 super 关键字，子类可以重写或扩展父类的方法，从而实现多态性。

ES6 继承实现原理

在 ES6 中，继承的实现原理如下：

父类构造函数被调用： 当创建子类实例时，父类构造函数首先被调用，这确保了子类实例正确初始化。
子类构造函数被调用： 接下来，子类构造函数被调用，它可以访问父类构造函数通过 super 关键字传递的属性和方法。
子类原型继承父类原型： 子类原型继承父类原型，这确保了子类实例可以访问父类原型上的属性和方法。
子类实例创建： 最后，创建子类实例，该实例具有子类构造函数定义的属性和方法，以及从父类继承的属性和方法。

代码示例

让我们通过一个代码示例来演示 ES6 中的继承：

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

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

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

  greet() {
    super.greet();
    console.log(`I am ${this.age} years old.`);
  }
}

// 创建子类实例
const child = new Child('John', 25);

// 调用子类方法
child.greet();