ES5 揭秘：class X extends P {} 的内部实现原理

从 ES5 到 ES6：揭秘类继承的语法糖

ES6 中引入的 class X extends P {} 语法糖，为 JavaScript 带来了面向对象编程的新语法，使类继承变得更加简洁和直观。然而，在 ES5 中，实现类继承需要通过原型链和构造函数来实现，这可能会让初学者感到困惑。本文将详细解释 ES5 中的 class X extends P {} 语法糖的内部实现原理，帮助读者深入理解 ES6 类继承的本质，从而更好地掌握 JavaScript 面向对象编程。

一、原型链和构造函数：ES5 类继承的基础

在 ES5 中，类继承是通过原型链和构造函数来实现的。原型链是指一个对象到它的原型对象的链接，而构造函数则是用来创建对象的函数。当一个子类继承父类时，子类的原型对象会被设置为父类的实例对象，这样子类就能访问父类的方法和属性。

例如，考虑以下 ES5 代码：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student("John Doe", "Computer Science");

student.greet(); // 输出：Hello, my name is John Doe!

在这个例子中，Student 类继承了 Person 类。Person 类的构造函数接受一个参数 name，并将其存储在 this.name 属性中。Person 类还定义了一个方法 greet()，用于向控制台输出一个问候消息。

Student 类的构造函数接受两个参数 name 和 major，并将它们存储在 this.name 和 this.major 属性中。Student 类还调用了 Person.call(this, name)，这会执行 Person 类的构造函数，并将 this 上下文设置为 Student 类的新实例。

Student 类的原型对象被设置为 Object.create(Person.prototype)，这意味着 Student 类将继承 Person 类的所有方法和属性。最后，Student.prototype.constructor 被设置为 Student，这确保了 Student 类的新实例能够正确地返回 Student 类。

当我们创建了一个 Student 类的新实例 student 时，student 对象的原型对象被设置为 Student.prototype。这允许 student 对象访问 Person 类的 greet() 方法，并输出 "Hello, my name is John Doe!"。

二、class X extends P {}：ES6 中的类继承语法糖

ES6 中引入的 class X extends P {} 语法糖，将 ES5 中的原型链和构造函数的繁琐语法简化为了一个简洁的类声明。例如，以下 ES6 代码实现了与前面 ES5 代码相同的类继承：

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

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

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }
}

const student = new Student("John Doe", "Computer Science");

student.greet(); // 输出：Hello, my name is John Doe!

在这个例子中，Person 类和 Student 类都是用 class 声明的。Person 类的构造函数接受一个参数 name，并将其存储在 this.name 属性中。Person 类还定义了一个方法 greet()，用于向控制台输出一个问候消息。

Student 类继承了 Person 类，并在构造函数中调用了 super(name)，这会执行 Person 类的构造函数，并将 this 上下文设置为 Student 类的新实例。Student 类还定义了一个新的属性 major，用于存储学生的专业。

当我们创建了一个 Student 类的新实例 student 时，student 对象的原型对象被设置为 Student.prototype。这允许 student 对象访问 Person 类的 greet() 方法，并输出 "Hello, my name is John Doe!"。

三、class X extends P {} 的内部实现原理

ES6 中的 class X extends P {} 语法糖实际上是在幕后使用了 ES5 中的原型链和构造函数来实现类继承的。当编译器遇到一个 class X extends P {} 语句时，它会自动生成以下 ES5 代码：

function X() {
  P.apply(this, arguments);
}

X.prototype = Object.create(P.prototype);
X.prototype.constructor = X;

这段代码首先定义了一个构造函数 X()，该构造函数调用了 P.apply(this, arguments) 来执行父类的构造函数，并将 this 上下文设置为子类的实例。

接下来，这段代码将子类的原型对象设置为 Object.create(P.prototype)，这意味着子类将继承父类的所有方法和属性。

最后，这段代码将子类的原型对象的 constructor 属性设置为 X，这确保了子类的实例能够正确地返回子类。

四、总结

通过本文的介绍，我们了解了 ES5 中的 class X extends P {} 语法糖的内部实现原理。我们知道，class X extends P {} 语法糖实际上是在幕后使用了 ES5 中的原型链和构造函数来实现类继承的。这使得 ES6 中的类继承更加简洁和直观，也让初学者更容易理解面向对象编程的概念。