Babel对class的降级是有迹可循的语义映射,核心特征包括:首字母大写的构造函数+prototype方法绑定、Parent.call(this)与Object.create继承链设置、_classCallCheck等下划线辅助函数,以及通过对照实验可验证结构一致性。

识别 Babel 等编译器对 class 的降级处理逻辑,关键在于理解它**不是黑盒转换,而是有迹可循的语义映射**。只要掌握其核心原则和输出特征,就能快速判断一段 ES5 代码是否由 class 降级而来,甚至反向还原设计意图。
看构造函数与 prototype 的绑定关系
ES6 class 是原型继承的语法糖,Babel 降级后必然保留「构造函数 + 方法挂 prototype」这一结构:
- 存在一个首字母大写的函数(如
function Animal() { ... }),且内部有显式赋值this.xxx = xxx—— 这大概率对应原constructor; - 紧随其后出现
XXX.prototype.xxx = function() { ... }或XXX.prototype = { ... }形式的方法定义 —— 对应 class 中的实例方法; - 若看到
Object.create(Parent.prototype)+Child.prototype.constructor = Child组合,基本可确认是extends的降级结果。
查继承链中的 call 与原型链设置
子类继承父类时,Babel 不会用 __proto__ 或现代 Reflect.construct,而是回归 ES5 原始模式:
- 子类构造函数第一行通常是
Parent.call(this, ...)—— 模拟super(...)调用; - 紧接着必有原型链重置操作,常见形式包括:
•Child.prototype = Object.create(Parent.prototype);
•Child.prototype.__proto__ = Parent.prototype;(较少见,非标准)
• 或通过辅助函数如_inherits(Child, Parent)封装上述逻辑(Babel 7 默认行为); - 最后一定有
Child.prototype.constructor = Child;修复构造器指向,否则instance.constructor会错误指向父类。
注意 Babel 自动生成的辅助函数
Babel 为保证语义严谨,会在文件顶部或模块作用域内注入辅助函数,它们是识别降级的重要“水印”:
-
_classCallCheck(instance, Constructor):检查是否使用new调用,对应class的构造限制; -
_inherits(subClass, superClass):封装继承逻辑,包含Object.create和constructor修复; -
_defineProperties(Constructor, props):用于static方法或Object.defineProperty场景; - 这些函数名带下划线前缀、含明确语义,且在源码中不会手动编写 —— 出现即强提示经 Babel 处理。
对比原始 class 与输出代码的结构一致性
真正可靠的识别方式,是做一次小范围对照实验:
- 写一个极简
class A { constructor(x) { this.x = x; } m() {} }; - 用 Babel(配置
@babel/preset-env,目标设为ie 11)编译它; - 观察输出:你会清晰看到构造函数体、prototype 方法、辅助函数调用三者如何一一对应;
- 之后再遇到类似结构的代码,就能立刻锚定它是 class 降级产物,而非手写 ES5 构造器。

















