ES6继承更规范严谨:通过class/extends/super实现自动原型链绑定和强制super调用,修复instanceof问题;ES5需手动组合构造函数与原型链,易出错且语义模糊。

JavaScript 中的继承在 ES5 和 ES6 中实现方式差异明显:ES5 依赖原型链和构造函数组合模拟,写法繁琐易错;ES6 引入 class 和 extends 关键字,语法简洁、语义清晰,并原生支持 super 调用父类方法,同时修复了 ES5 继承中子类实例不是父类实例的问题(即 instanceof 行为更合理)。
ES5 继承:借用构造函数 + 原型链组合
ES5 没有 class 语法,需手动操作原型实现继承。常见做法是:先用 call/apply 继承实例属性,再用 Object.create 设置原型链继承方法。
典型实现如下:
function Parent(name) {this.name = name;
}
Parent.prototype.sayHello = function() {
console.log('Hello, ' + this.name);
};
function Child(name, age) {
// 继承实例属性(调用父构造函数)
Parent.call(this, name);
this.age = age;
}
// 继承原型方法(设置 Child.prototype 的原型为 Parent.prototype)
Child.prototype = Object.create(Parent.prototype);
// 修复 constructor 指向
Child.prototype.constructor = Child;
// 添加子类特有方法
Child.prototype.sayAge = function() {
console.log('I am ' + this.age + ' years old');
};
⚠️ 注意点:
立即学习“Java免费学习笔记(深入)”;
- 必须手动调用
Parent.call(this, ...)否则子类拿不到父类的 this 属性 -
Object.create(Parent.prototype)是关键,直接赋值Child.prototype = Parent.prototype会导致修改子类原型影响父类 - constructor 需重设,否则
new Child().__proto__.constructor === Parent - 子类实例
instanceof Parent为 true,但若只用构造函数借用(没设原型链),则为 false
ES6 继承:class + extends + super
ES6 的 class 是语法糖,但 extends 实现了真正的基于类的继承语义,且要求子类构造函数中必须调用 super()。
等价写法如下:
class Parent {constructor(name) {
this.name = name;
}
sayHello() {
console.log('Hello, ' + this.name);
}
}
class Child extends Parent {
constructor(name, age) {
// 必须第一行调用 super,初始化 this
super(name); // 相当于 Parent.call(this, name)
this.age = age;
}
sayAge() {
console.log('I am ' + this.age + ' years old');
}
}
✅ 优势包括:
- 语法更直观,接近传统面向对象语言
- 自动绑定原型链,无需手动 Object.create 和修复 constructor
- 强制调用 super(),避免 this 未定义错误
- 子类实例既是 Child 又是 Parent 的实例(
new Child() instanceof Parent === true),继承关系更严谨 - 支持静态方法继承(
static方法可通过super在子类中调用)
核心区别总结
本质差异不在“能不能继承”,而在于设计意图与底层保障:
-
ES5 是模拟:开发者手动拼装,容易漏步骤(如忘记 super 或修复 constructor),
instanceof和getPrototypeOf行为需小心维护 - ES6 是规范:引擎强制执行继承逻辑,子类 constructor 内不调用 super 会报错;Class 定义的函数不可被 new 调用(非构造函数),安全性更高
-
super 的含义不同:ES5 中无 super;ES6 中 super 既可调用父类构造函数(
super()),也可调用父类方法(super.sayHello()),且在静态方法中也有效 - 可枚举性一致:ES6 class 中定义的方法默认不可枚举(符合 ES5 原型方法行为),与手动挂载到 prototype 效果一致
实际使用建议
现代开发应优先使用 ES6 class 继承:
- 团队协作中可读性高,减少理解成本
- 配合 Babel 可向下兼容到 ES5 环境
- TypeScript、Vue 3、React 类组件均基于 ES6 class 语义设计
- 仅在需深度控制原型链或兼容极老环境(如 IE8)时才回归 ES5 方式










