Babel 把 ES6 的 class 转成 ES5，关键其实就落在几件事上：先把 class 这种语法糖拆开，用构造函数去替代 class 声明；再把实例方法挂到 prototype 上，同时把 enumerable 设为 false；继承这部分，则借助 _inherits 等辅助函数，配合 Object.setPrototypeOf 来模拟原型链；另外还会补上一层 _classCallCheck，用来防止在没有 new 的情况下直接调用。

Babel 会把 ES6 里的 class 改写成 ES5 的普通函数。本质上可以概括为三步：先把语法糖拆开，再用原型链把类的行为模拟出来，最后补上静态属性和静态方法的处理。

说白了，它走的是兼容性转换这条路。不是依赖 Function.prototype.constructor 这类能力，也不是靠运行时反射来“猜”结构，而是在编译阶段就把等价的函数声明和原型赋值代码静态生成出来。

Class 声明如何被展开

Babel 会把 class A { constructor() {} method() {} } 编译成一个具名函数，并将实例方法挂载到其 prototype 上。

• 类体中的 constructor 变成函数本体
• 其他方法（如 method）被提取为 A.prototype.method = function() {...}
• 所有方法默认不可枚举（符合 class 行为），Babel 用 Object.defineProperty 设置 enumerable: false

核心处理方式

重点在于两件事：一是把 class 还原成普通构造函数，二是把方法按 ES5 的方式挂到原型对象上。这样就能在旧环境里模拟出 class 的行为。

处理继承（extends）需手动模拟原型链

当使用 class B extends A 时，Babel 会手动补齐继承逻辑，而不是直接依赖原生 class 机制。

• 生成继承辅助函数（如 _inherits），内部调用 Object.setPrototypeOf(B, A) 和 Object.setPrototypeOf(B.prototype, A.prototype)
• 确保子类构造函数中正确调用 super() —— 实际转译为 _get(_getPrototypeOf(B), "constructor", this).call(this) 类似逻辑
• 对静态方法，同样通过 Object.defineProperty 挂载到构造函数自身上

继承转换的关键点

extends 的本质处理，就是手动连接构造函数和原型对象之间的关系。这样生成的 ES5 代码，才能表现出接近原生 class 继承的效果。

装饰器、私有字段等需额外插件支持

原生 class 的高级特性不会被默认 preset 处理。涉及这些能力时，需要额外启用对应插件。

• #privateField 需启用 @babel/plugin-proposal-private-methods 和 @babel/plugin-proposal-class-properties
• 装饰器（@decorator）需开启实验性插件并配置 legacy: true 才能转译为可读的函数包装形式
• 这些插件会在构造函数内插入闭包变量或 WeakMap 来模拟私有状态

需要注意

这些高级能力并不是 class 基础转译的一部分。如果没有相关插件，Babel 不会自动把它们完整转换出来。

实际编译效果示例

输入：

class Person {
constructor(name) { this.name = name; }
say() { return `Hi, ${this.name}`; }
}

经 @babel/preset-env（target: ES5）转译后类似：

function Person(name) {
"use strict";
if (!(this instanceof Person)) throw new TypeError("Cannot call a class as a function");
this.name = name;
}
Object.defineProperty(Person.prototype, "say", {
value: function say() { return "Hi, " + this.name; },
writable: true,
configurable: true
});

其中 classCallCheck 辅助函数用于防止直接调用（无 new）。这是 class 与普通函数的关键行为差异，Babel 显式补全了这一限制。

《夸克》非常好用的免费AI浏览器

下载APP查看