在 JavaScript 中，class 语法是 ES6（ECMAScript 2015）引入的，用于创建对象的模板和实现继承。尽管 class 语法提供了一种更接近其他面向对象编程语言（如 Java 和 C++）的方式来定义类和继承，但它的底层实现原理仍然基于 JavaScript 的原型链机制。下面是对 class 构造和继承底层实现原理的详细解释。
class 构造函数
在 JavaScript 中，class 实际上是语法糖，它简化了基于原型的对象创建方式。以下是 class 和 constructor 的基本定义：
class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}`);}
}底层实现原理
上述 class 语法在底层被转换为：
function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
};- 构造函数：Person 是一个构造函数，它在实例化对象时被调用。
- 原型：Person.prototype 是一个对象，包含了所有实例共享的方法。
继承
继承同样通过原型链实现。假设有一个 Student 类继承自 Person 类：
class Student extends Person {constructor(name, age, studentId) {super(name, age); // 调用父类构造函数this.studentId = studentId;}study() {console.log(`Student ${this.name} is studying.`);}
}
底层实现原理
上述 class 语法在底层被转换为：
function Student(name, age, studentId) {Person.call(this, name, age); // 调用父类构造函数this.studentId = studentId;
}Student.prototype = Object.create(Person.prototype); // 设置 Student 的原型链
Student.prototype.constructor = Student; // 修正 Student.prototype.constructorStudent.prototype.study = function() {console.log(`Student ${this.name} is studying.`);
};- super：super 关键字用于调用父类的构造函数和方法。其在底层实际上是通过 Person.call(this, name, age) 实现的。
- 原型链：Student.prototype 通过 Object.create(Person.prototype) 设置为 Person.prototype 的实例，从而实现了原型链继承。
- 构造函数修正：Student.prototype.constructor 被修正为 Student，以确保 instanceof 操作符和 constructor 属性的正确性。
class 的静态方法和 getter/setter
类还支持静态方法和 getter/setter：
class Person {constructor(name) {this.name = name;}static species() {return 'Homo sapiens';}get uppercaseName() {return this.name.toUpperCase();}set uppercaseName(value) {this.name = value.toLowerCase();}
}底层实现原理
静态方法在底层被直接添加到构造函数上：
Person.species = function() {return 'Homo sapiens';
};getter 和 setter 通过原型的 Object.defineProperty 实现：
Object.defineProperty(Person.prototype, 'uppercaseName', {get: function() {return this.name.toUpperCase();},set: function(value) {this.name = value.toLowerCase();}
});
所以class 语法是对原型链继承机制的一个语法糖。它简化了对象的创建和继承过程，但底层实现仍然依赖于构造函数和原型链的机制。理解这些底层实现有助于更深入地掌握 JavaScript 的面向对象编程。