JavaScript中class关键字的作用、实现机制及相关疑问解答

一、“JS中的类只是函数”的本质 #

首先明确：class是ES6引入的语法糖，它的底层依然基于JS的原型链与构造函数机制。说“类只是函数”，是指类最终会被引擎转换为特殊的构造函数，但它并非普通函数，有专属特性。

二、class关键字的实际作用 #

拿你给出的Hero示例对比：
函数版需要直接定义构造函数function Hero(...)，再手动把方法挂载到Hero.prototype上；而类版的class Hero会被引擎自动完成以下操作：

• 将类块中的constructor函数，转为该类对应的构造函数（也就是你理解的“作为函数的Hero”）
• 把类中定义的其他方法（比如greet）自动挂载到该构造函数的prototype上，无需手动编写Hero.prototype.greet = ...

简言之，类写法帮你省去了手动操作原型的步骤，同时规范了构造逻辑的编写方式。

三、new调用类时的执行逻辑 #

当你执行new Hero('张三', 10)时，完全符合MDN所说的new调用构造函数流程：

1. 创建空对象newInstance
2. 将newInstance的[[Prototype]]指向Hero.prototype（类的prototype就是对应构造函数的prototype）
3. 将newInstance绑定为constructor函数的this，执行constructor内的赋值逻辑
4. 由于constructor未返回非原始值，最终返回newInstance

你疑惑的“调用Hero而非constructor”，本质是类对应的构造函数就是constructor的内容——引擎会把类里的constructor直接作为该构造函数的执行体，调用时传入的参数也会直接传递给constructor，所以类版Hero的参数和函数版是完全对应的。

四、为什么类里写constructor合法，函数里写不合法？ #

这是因为constructor是class语法块中的特殊关键字，引擎会识别它并将其作为构造逻辑处理。而在普通函数中，constructor只是普通标识符，你直接写constructor(type){...}属于语法错误：
普通函数内部遵循常规函数语法，声明嵌套函数必须用function关键字，直接写constructor(...)没有声明关键字，不符合语法规则。

简单总结：

• class语法块有专属规则，constructor是其中用于指定构造逻辑的特殊语法
• 普通函数内部无此特殊关键字，直接写constructor(...)会触发语法报错

五、class与普通构造函数的额外差异 #

class除了简化原型操作，还有普通函数没有的特性：

• 类必须用new调用，直接调用Hero()会报错；普通构造函数可以直接调用（虽然后果不符合预期）
• 类的原型方法默认不可枚举，手动挂载到原型的普通函数默认可枚举
• 类内部默认启用严格模式
• 类支持私有字段、静态方法等语法糖，用普通函数实现需编写更多代码

内容的提问来源于stack exchange，提问作者journeywithjavascript