javascript作为一门基于原型的语言，继承的实现方式和传统的基于类的语言有很大不同，同时ES6引入的class语法也为继承提供了更简洁的写法，下面我们来详细了解相关内容。
javascript原型继承的实现方式
原型继承是javascript最基础的继承实现方式，核心是利用原型链让一个对象可以访问另一个对象的属性和方法。常见的原型继承实现有以下几种：
1. 原型链继承
原型链继承是最原始的继承方式，直接将子类的原型指向父类的实例，这样子类就可以访问父类实例的属性和原型上的方法。
// 定义父类构造函数
function Parent(name) {
this.name = name;
this.parentArr = [1, 2, 3];
}
// 父类原型上添加方法
Parent.prototype.getName = function() {
return this.name;
};
// 定义子类构造函数
function Child(age) {
this.age = age;
}
// 核心：将子类原型指向父类实例
Child.prototype = new Parent('父类实例');
// 修复子类原型的构造函数指向
Child.prototype.constructor = Child;
// 测试
const child1 = new Child(18);
console.log(child1.getName()); // 输出：父类实例
console.log(child1.parentArr); // 输出：[1, 2, 3]
const child2 = new Child(20);
// 引用类型的属性会被所有实例共享
child1.parentArr.push(4);
console.log(child2.parentArr); // 输出：[1, 2, 3, 4]
这种方式的缺点是父类实例的引用类型属性会被所有子类实例共享，修改一个实例的引用属性会影响其他实例，同时无法在创建子类实例时给父类构造函数传参。
2. 构造函数继承
构造函数继承通过在子类构造函数中调用父类构造函数，借助call或apply改变父类的this指向，实现属性的继承。
// 父类构造函数
function Parent(name) {
this.name = name;
this.parentArr = [1, 2, 3];
}
Parent.prototype.getName = function() {
return this.name;
};
// 子类构造函数
function Child(name, age) {
// 调用父类构造函数，this指向子类实例
Parent.call(this, name);
this.age = age;
}
// 测试
const child1 = new Child('张三', 18);
console.log(child1.name); // 输出：张三
console.log(child1.parentArr); // 输出：[1, 2, 3]
child1.parentArr.push(4);
const child2 = new Child('李四', 20);
console.log(child2.parentArr); // 输出：[1, 2, 3]，不会互相影响
// 缺点：无法继承父类原型上的方法
console.log(child1.getName); // 输出：undefined
这种方式的优点是每个子类实例的属性都是独立的，不会互相影响，也可以在创建子类实例时给父类传参，缺点是父类原型上的方法无法被继承，所有方法都只能在构造函数中定义，无法实现函数复用。
3. 组合继承
组合继承结合了原型链继承和构造函数继承的优点，是最常用的原型继承方式之一。
// 父类构造函数
function Parent(name) {
this.name = name;
this.parentArr = [1, 2, 3];
}
Parent.prototype.getName = function() {
return this.name;
};
// 子类构造函数
function Child(name, age) {
// 构造函数继承：继承父类实例属性
Parent.call(this, name);
this.age = age;
}
// 原型链继承：继承父类原型方法
Child.prototype = new Parent();
// 修复构造函数指向
Child.prototype.constructor = Child;
// 测试
const child1 = new Child('张三', 18);
console.log(child1.getName()); // 输出：张三
console.log(child1.parentArr); // 输出：[1, 2, 3]
child1.parentArr.push(4);
const child2 = new Child('李四', 20);
console.log(child2.parentArr); // 输出：[1, 2, 3]
console.log(child2.getName()); // 输出：李四
组合继承既保证了每个实例属性的独立性，又能继承父类原型上的方法，但是会调用两次父类构造函数，一次是在设置子类原型时，一次是在子类构造函数内部。
ES6 class实现继承
ES6引入的class语法是原型继承的语法糖，让继承的写法更简洁清晰，底层仍然是基于原型链实现的。
// 定义父类
class Parent {
// 构造函数，初始化实例属性
constructor(name) {
this.name = name;
this.parentArr = [1, 2, 3];
}
// 原型方法
getName() {
return this.name;
}
}
// 定义子类，通过extends关键字继承父类
class Child extends Parent {
constructor(name, age) {
// 调用父类构造函数，必须在this之前调用
super(name);
this.age = age;
}
getAge() {
return this.age;
}
}
// 测试
const child1 = new Child('张三', 18);
console.log(child1.getName()); // 输出：张三
console.log(child1.getAge()); // 输出：18
console.log(child1.parentArr); // 输出：[1, 2, 3]
child1.parentArr.push(4);
const child2 = new Child('李四', 20);
console.log(child2.parentArr); // 输出：[1, 2, 3]
console.log(child2.getName()); // 输出：李四
使用class继承时，子类必须在constructor中先调用super方法，才能使用this，super相当于调用父类的构造函数，还可以作为对象访问父类的原型方法。
ES6 class与原型继承的区别
虽然class继承底层是基于原型继承实现的，但是两者还是有很多差异：
| 对比维度 | 原型继承 | ES6 class继承 |
|---|---|---|
| 语法形式 | 需要手动操作prototype和constructor，写法繁琐 | 使用class、extends、super等关键字，语法更简洁清晰 |
| 构造函数调用 | 组合继承会调用两次父类构造函数 | 只会调用一次父类构造函数，通过super调用 |
| 原型方法定义 | 需要手动添加到构造函数的prototype对象上 | 直接在class内部定义，自动添加到原型上 |
| 静态方法和属性 | 需要手动添加到构造函数本身 | 使用static关键字直接定义 |
| 类提升 | 构造函数会提升，可以先使用后定义 | class不会提升，必须先定义后使用 |
| 内部实现 | 直接基于原型链操作 | 语法糖，底层仍然基于原型链，但是做了更多内部优化 |
总结
原型继承是javascript继承的基础实现方式，有多种不同的实现方案，各有优缺点，适合不同的场景。ES6的class继承是原型继承的语法糖，让继承的写法更符合传统面向对象语言的习惯，降低了理解和使用成本，同时内部做了优化，避免了原型继承中的一些冗余操作。在实际开发中，如果是支持ES6的环境，优先使用class继承，代码可读性和维护性更好；如果需要兼容更老的环境，可以选择合适的原型继承方案。
javascriptclass原型继承prototype修改时间：2026-07-20 16:03:46