JavaScript的class是ES6引入的语法糖，本质为原型继承；兼容老浏览器需转为构造函数+原型链+Object.defineProperty，推荐用Babel自动转换，手动转换需注意原型链设置、super模拟及静态方法挂载。
JavaScript 的 class 语法是 ES6（ES2015）引入的语法糖，本质仍是基于原型的函数式继承。要让它在不支持 ES6 的老浏览器（比如 IE10 及以下、Android 4.4 WebView 等）中运行，核心思路是：**把 class 声明转成等价的构造函数 + 原型链赋值 + Object.defineProperty（处理 getter/setter 和静态属性）**。
用 Babel 自动转换（最常用、推荐）
Babel 是目前最成熟、最可靠的 ES6+ → ES5 转换工具。它能准确还原 class 的语义，包括：
- 类声明 → 构造函数 +
prototype方法挂载 - 继承（
extends）→inherits辅助函数 +Object.setPrototypeOf或__proto__回退 - 静态方法/属性 → 直接挂到构造函数上
- 私有字段（
#field）、私有方法等需额外插件（如@babel/plugin-proposal-class-properties）
配置示例（.babelrc）：
{
"presets": [
["@babel/preset-env", {
"targets": {
"ie": "10"
}
}]
]
}
配合 Webpack / Vite / Rollup 等构建工具，就能全自动完成转换。
立即学习“Java免费学习笔记（深入）”；
手动转成 ES5 函数式写法（理解原理用）
例如这个 ES6 class：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
static isAnimal(obj) {
return obj instanceof Animal;
}
}
对应的手动 ES5 写法：
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name + ' makes a sound.');
};
Animal.isAnimal = function(obj) {
return obj instanceof Animal;
};
注意点：
- 类名首字母大写，保持命名一致性
- 所有实例方法都显式挂到
Animal.prototype上 - 静态方法直接挂在函数对象本身（
Animal.isAnimal） - 无构造器时，可省略
function Animal() {}中的逻辑，但函数声明不能省
处理继承（extends）的兼容写法
ES6 中：
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log('Woof!');
}
}
ES5 手动实现需模拟 super 调用和原型链连接：
function Dog(name, breed) {
Animal.call(this, name); // 相当于 super(name)
this.breed = breed;
}
// 设置原型链：Dog.prototype.__proto__ === Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log('Woof!');
};
更健壮的写法会用辅助函数封装原型继承逻辑（Babel 就是这么做的）。
注意事项和常见坑
- 不能用
function Dog() {}替代class Dog {}后直接调用new Dog()—— 缺少prototype方法就报错 -
class声明不会被提升（hoisting），而函数声明会；转成函数后要注意调用顺序 - 箭头方法、可选链（?.）、空值合并（??）等新特性也要一并转译，不能只处理 class
- 如果项目用了 TypeScript，tsc 编译时设置
"target": "es5"也能输出兼容代码（但 class 继承逻辑仍依赖 lib.es5.d.ts 的 polyfill 行为）
