JavaScript继承基于原型链，ES6前用构造函数和原型实现，如原型链继承、构造函数继承、组合继承及寄生组合继承；其中寄生组合继承为最优方案，避免重复调用父类构造函数。ES6引入class和extends语法，使继承更直观，但底层仍基于原型链，仅是语法糖。class支持static定义静态方法，提升可读性与生态兼容性，现代框架广泛采用。核心原理始终为原型机制。
JavaScript 中的继承机制是理解面向对象编程的关键。在 ES6 之前，主要依赖原型链来实现继承；ES6 引入了 class 语法，让继承更直观。下面分别介绍原型链继承的几种方式，并对比 ES6 类与原型继承的区别。
原型链继承的常见方式
在 ES5 及更早版本中，没有 class 关键字，开发者通过操作构造函数和原型对象来实现继承。以下是几种典型的原型链继承方式：
1. 原型链继承（经典继承）
将子类的原型指向父类的实例。
function Parent() {
this.name = ‘parent’;
}
Parent.prototype.getName = function() {
return this.name;
};
function Child() {
//…
}
Child.prototype = new Parent(); // 核心：子类原型等于父类实例
Child.prototype.constructor = Child;
缺点：父类的引用类型属性会被所有子类实例共享，一个实例修改会影响其他实例。
2. 构造函数继承（伪造继承）
在子类构造函数中调用父类构造函数，使用 call 或 apply。
function Child(name) {
Parent.call(this);
}
优点：可以传递参数，每个实例都有独立的属性。
缺点：无法继承父类原型上的方法。
3. 组合继承（最常用）
结合原型链继承和构造函数继承。
function Child(name) {
Parent.call(this, name); // 第二次调用 Parent
}
Child.prototype = new Parent(); // 第一次调用 Parent
Child.prototype.constructor = Child;
优点：兼具属性独立和方法复用。
缺点：父类构造函数被调用两次，效率略低。
4. 寄生组合继承（最佳实践）
优化组合继承，避免重复调用父类构造函数。
function inherit(Child, Parent) {
const prototype = Object.create(Parent.prototype);
prototype.constructor = Child;
Child.prototype = prototype;
}
这种方式只调用一次父类构造函数，同时保持原型链完整，是 ES5 时代的最佳方案。
ES6 类与原型继承的对比
ES6 引入了 class 和 extends 关键字，让 JavaScript 的继承语法更接近传统面向对象语言。
1. 语法更清晰
ES6 使用 class 定义类，extends 实现继承，super 调用父类方法或构造函数。
class Parent {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
}
代码结构更清晰，易于理解和维护。
2. 底层仍是原型继承
class 并没有引入新的继承模型，它只是语法糖，底层依然基于原型链。
上述 Child 类的本质，仍然是设置 Child.prototype 的 [[Prototype]] 指向 Parent.prototype，并通过 Object.setPrototypeOf 设置构造器之间的关系。
3. 更好的静态方法支持
ES6 支持 static 关键字定义静态方法，可以直接在类上调用，无需实例化。
class Parent {
static sayHello() {
console.log(‘Hello’);
}
}
这种特性在原型模式中需要手动挂载到构造函数上，不够直观。
4. 兼容性与可读性提升
class 语法更容易被熟悉 Java、C++ 等语言的开发者接受，降低了学习门槛。
现代框架如 React、Vue 的类组件都基于此语法，生态支持更好。
基本上就这些。虽然写法变了，但核心原理没变——JavaScript 的继承始终建立在原型机制之上。ES6 的 class 让我们写得更舒服，而寄生组合继承等模式则帮助我们深入理解语言本质。不复杂但容易忽略。
以上就是原型链继承的几种方式_ES6类与原型继承的对比的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539564.html
微信扫一扫 
支付宝扫一扫 
