ES5继承靠构造函数借用和原型链组合实现，ES6用class/extends/super语法糖并自动建立完整原型链与静态继承。
ES5继承：靠构造函数和原型链配合
ES5没有class关键字，实现继承主要靠组合使用构造函数借用（call/apply）和原型链继承。核心思路是：子类实例先拥有父类的实例属性，再让子类原型指向父类原型的副本，从而共享方法。
常见写法（寄生组合式继承，最推荐）：
function Parent(name) { this.name = name;}Parent.prototype.say = function() { console.log('Hello from ' + this.name);};function Child(name, age) { Parent.call(this, name); // 借用构造函数，继承实例属性 this.age = age;}// 关键：用Object.create(Parent.prototype)避免调用Parent构造函数Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child; // 修复constructor指向Child.prototype.play = function() { console.log(this.name + ' is playing');};
⚠️ 注意点：
不手动设置Child.prototype = Parent.prototype，否则修改子类原型会影响父类 必须重设constructor，否则new Child().__proto__.constructor会指向Parent 无法继承父类的静态方法（如Parent.staticMethod = () => {}），需额外拷贝
ES6继承：class + extends + super，语法更清晰
ES6引入class语法糖，但本质仍是基于原型的继承。使用extends声明继承关系，子类构造函数中必须调用super()——它负责初始化this并连接原型链。
立即学习“Java免费学习笔记（深入）”；
class Parent { constructor(name) { this.name = name; } say() { console.log('Hello from ' + this.name); } static create() { return new Parent('default'); }}class Child extends Parent { constructor(name, age) { super(name); // 必须！相当于Parent.call(this, name) this.age = age; } play() { console.log(this.name + ' is playing'); } // 静态方法也能被继承 static build() { return new Child('test', 10); }}
✅ 优势明显：
语法简洁，语义明确，“继承”意图一目了然 自动建立正确的原型链：Child.__proto__ === Parent（静态继承），Child.prototype.__proto__ === Parent.prototype（实例方法继承） 支持继承父类静态方法和getter/setter 子类构造函数中不调用super()会直接报错，强制规范流程
关键差异对比：不只是写法不同
表面上是语法糖，底层机制有实质性区别：
原型链建立时机不同：ES5靠手动赋值Child.prototype = ...；ES6在extends时就自动设置好Child.prototype.__proto__和Child.__proto__ this绑定逻辑不同：ES5中this在子构造函数里已存在；ES6中子类构造函数里，this在super()执行前是未初始化的，直接访问会报ReferenceError 静态成员继承支持：ES6原生支持Child.staticMethod继承Parent.staticMethod；ES5需手动赋值Child.staticMethod = Parent.staticMethod 可扩展性：ES6 class支持get/set、static、private #field等特性，ES5模拟成本高且不统一
实际开发建议
新项目一律用ES6 class继承。ES5写法仅需了解，用于阅读老代码或兼容极旧环境（如IE）。
遇到报错Must call super constructor in derived class before accessing 'this'？说明忘了在子类constructor第一行写super()。
想在子类中调用父类同名方法？用super.methodName()，这是ES6新增的语法，ES5得写Parent.prototype.methodName.call(this)。
基本上就这些。理解原型链本质，再看class语法，就不会被“语法糖”三个字带偏了。
以上就是JavaScript中如何实现继承_ES5和ES6继承方式对比的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542916.html
微信扫一扫 
支付宝扫一扫 
