JavaScript之Class构造及继承的底层实现原理

笔者语

已经坚持发布技术文章一个月，得到了一些朋友的阅读与支持，我感到很荣幸，也是继续坚持下去的动力。工作很多年，今年才开始写技术类文章发表，因为以前总是担心写错，把错误的知识带给别人，对于学习错误知识的人来说是一种伤害。其实现在也有这种担心，所以每篇文章都是用心完成，但也不敢完全保障没有失误的地方，如果有朋友发现，还请留言指出，我们也可以进行技术讨论。总之是希望给大家能带来些正能量，同时也希望大家把正能量带给身边的人。

正文

ES6 中引入了 class 关键字，提供了一种更清晰、面向对象的语法糖来定义对象和实现继承。然而，在底层，JavaScript 仍然是基于原型的语言，class 只是一种更便捷的语法，其实现仍然依赖于原型继承。

下面是 ES6 class 构造和继承的底层实现原理：

Class 构造

在 ES6 中，通过 class 关键字创建的类其实本质上仍然是函数。这个函数可以通过 new 关键字来实例化。例如：

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

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

const person = new Person('John');
person.sayHello(); // 输出: Hello, my name is John

底层实现中，class 声明的类被转化为一个函数，构造函数的逻辑被放在了这个函数的 constructor 方法中，而类的方法则被添加到该函数的原型上。

继承的底层实现

ES6 中的类继承通过 extends 关键字来实现。例如：

class Student extends Person {
  constructor(name, grade) {
    super(name); // 调用父类的构造函数
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}`);
  }
}

const student = new Student('Alice', 5);
student.sayHello(); // 输出: Hello, my name is Alice
student.study();    // 输出: Alice is studying in grade 5

在底层，继承实际上是通过修改原型链来实现的。Student 类的原型是 Person 类的实例，因此它继承了 Person 类的方法。super 关键字用于调用父类的构造函数，确保子类在实例化时能够正确地初始化父类的属性。

实例和原型

每个通过类创建的实例都拥有一个原型链，该原型链连接着该实例的原型和父类的原型。实例的方法和属性在自身找不到时会沿着原型链向上查找。

总结

ES6 的 class 语法更加直观和易读，但其底层实现仍然是基于原型的。这意味着你可以使用更传统的原型链操作来实现相同的功能，但 class 语法更为简洁和易于理解。

结束语

收集了一些前端相关的思维导图，可以帮忙大家更好的学习前端知识，需要的话可以公众号回复 12 获取。

本文由mdnice多平台发布