JS的继承实现的主要方法包括哪些，如何实现

JavaScript的继承实现主要通过原型链和构造函数组合完成，但现代开发中更推荐使用ES6 class 语法，它让代码更清晰且易于维护，本质上仍是基于原型链的封装。

js继承的几种方式对比：从原型链到class

继承是面向对象编程的核心,JavaScript 通过原型链实现这一机制，但不同方式的实现细节和适用场景差异很大，从最早的 ES5 时代到 ES6 普及，继承写法经历了多轮演变，你需要理解每种方式的本质，才能在实际项目中做出正确选择。

加载中

面试官: JavaScript继承方式有哪些【原型链继承、构造函数继承、组合继承、寄生组合继承】

codereasy

1.5万27443

原视频地址

原型链继承：最基础的实现

原型链继承的核心是让子类的原型对象指向父类的一个实例,代码实现很简单：

function Parent() {
  this.name = 'parent';
}
Parent.prototype.say = function() {
  console.log(this.name);
};
function Child() {}
Child.prototype = new Parent();   // 子类原型指向父类实例

这种方式让子类实例可以访问父类原型上的方法,但缺点也很明显：所有子类实例共享父类实例中的引用类型属性，比如父类中有一个数组属性，修改一个子类实例的数组，其他子类实例都会受影响，创建子类实例时无法向父类构造函数传参，实用性有限。

构造函数继承：解决引用共享问题

构造函数继承通过在子类中调用父类构造函数来避免引用共享,最典型的就是在子类中使用 call 或 apply：

function Parent(name) {
  this.name = name;
  this.tags = ['a', 'b'];
}
function Child(name) {
  Parent.call(this, name);   // 调用父类构造函数
}

这样每个子类实例都拥有自己的 name 和 tags，不会互相干扰，而且可以传参，但缺点同样突出：无法继承父类原型上的方法，所有方法都必须定义在构造函数内部，导致函数复用性差。

组合继承：取长补短的折中方案

组合继承结合了原型链和构造函数,既用原型链继承方法，又用构造函数解决引用共享和传参问题：

function Parent(name) {
  this.name = name;
  this.tags = ['a', 'b'];
}
Parent.prototype.say = function() { console.log(this.name); };
function Child(name, age) {
  Parent.call(this, name);   // 第一次调用父类构造函数
  this.age = age;
}
Child.prototype = new Parent();   // 第二次调用父类构造函数
Child.prototype.constructor = Child;

这种方案在 ES5 时代被广泛使用，但有两个问题：父类构造函数被调用了两次

，导致子类原型上存在一份多余的父类实例属性；同时原型链上会保留一份冗余的实例属性，占用内存。

寄生组合继承：最理想的 ES5 继承

寄生组合继承通过一个中间对象来避免多次调用父类构造函数,核心思路是借用 Object.create 来创建原型链接：

function inherit(Child, Parent) {
  let prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}
function Parent(name) { this.name = name; }
Parent.prototype.say = function() { console.log(this.name); };
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
inherit(Child, Parent);

这种方式只调用一次父类构造函数,并且子类原型上不会出现多余的属性，是目前 ES5 环境下最推荐的继承实现，业内专家指出，寄生组合继承在性能上优于组合继承，内存占用也更小。

ES6 class 继承：现代开发的推荐

ES6 引入了 class 和 extends 关键字，让继承写法更接近传统面向对象语言：

class Parent {
  constructor(name) { this.name = name; }
  say() { console.log(this.name); }
}
class Child extends Parent {
  constructor(name, age) {
    super(name);   // 调用父类构造函数
    this.age = age;
  }
}

extends 背后依然是原型链和寄生组合继承的封装，但语法更清晰，不需要手动处理原型指向和构造函数修正。super 关键字可以用来调用父类构造函数或访问父类方法，匹配面向对象编程的习惯。绝大多数现代前端项目都使用 class 来实现继承，因为它代码量少、可读性强，且符合团队规范。

原型链继承和构造函数继承的区别在哪

这两个概念经常被放在一起比较,它们的核心区别在于属性继承的方式和方法复用的机制。

• 原型链继承：子类实例通过 __proto__ 链访问父类实例上的属性和方法，父类实例上的引用类型属性会被所有子类实例共享，修改一个就影响全部，同时无法向父类构造函数传参。
• 构造函数继承：子类实例通过 call/apply 直接调用父类构造函数，将父类实例的属性复制到自身，每个子类实例都有独立的属性副本，不会共享，也可以传参，但父类原型上的方法不会被子类继承，必须在构造函数内部定义方法，导致无法复用。

从实际场景来看,如果你需要继承父类原型上的方法，同时避免引用共享，就必须把两者结合，也就是组合继承或寄生组合继承，ES6 class 的

extends 底层自动实现了寄生组合继承，开发者无需纠结这两者的取舍。

对比表格：

js继承面试题详解：常见考点与进阶

面试中关于继承的题目通常围绕实现原理、优缺点对比以及手写代码展开，以下是一些高频问题及其解答。

如何实现一个完美的继承

面试官往往会要求你写出寄生组合继承的代码,或者直接让你用 ES5 实现类似 extends 的效果，你需要在回答中体现对原型链和构造函数调用的理解，并指出寄生组合继承为什么是 ES5 环境下的最优解，一个标准的回答包含：使用 Object.create 创建原型对象，手动修正 constructor 指向，以及通过 call 继承实例属性。

instanceof 的原理与继承的关系

instanceof 用于检测一个对象是否在某个构造函数的原型链上，其原理是沿着对象的 __proto__ 链依次查找，看是否等于构造函数的 prototype，在继承场景下，instanceof 可以判断子类实例是否属于父类构造函数，但要注意它检测的是原型链，而不是实际的构造函数，如果子类原型被重新赋值，可能导致 instanceof 结果不准确。

ES6 class 继承与 ES5 继承的本质区别

ES6 class 继承在语义上更接近类继承，但底层仍然是基于原型链的，区别在于：ES6 class 的继承机制要求子类必须在 constructor 中调用 super()，否则会报错，这是因为 ES6 的继承是先将父类实例的属性和方法添加到 this 上，然后再由子类进行修改，而 ES5 的继承是先创建子类实例，再通过 call 将父类属性绑定到该实例上，ES6 class 支持静态方法的继承，

super 关键字可以在子类中访问父类方法，这在 ES5 中需要手动绑定。

前端项目中js继承的最佳实践

在实际开发中,继承的使用需要结合项目规模、团队习惯和性能要求。

推荐使用 class 继承，但理解原型链依然是基础

大多数情况下,使用 ES6 class 继承就足够了，它语法简洁，容易维护，并且配合 TypeScript 等工具可以获得更好的类型检查，但不要因为 class 的出现就忽略原型链的原理，因为很多底层库（如 Vue、React 早期版本）依然依赖原型链操作，调试时也需要理解原型链的查找机制。

组合优于继承，避免过度使用继承

行业共识认为,在 JavaScript 中，组合（composition）往往比继承更灵活，继承容易导致层级过深、耦合度高的问题，在项目迭代中难以维护，如果你只是需要复用一些方法，优先考虑使用函数、混入（mixin）或者组合类的方式，而不是强行构建一个继承链，使用 Object.assign 将多个对象的功能合并到一个组件中，比多层继承更易扩展。

性能对比：原型链方法 vs 实例方法

在性能敏感的场景中,优先将方法定义在原型上，而不是构造函数内部，原型链上的方法只存在一份，所有实例共享，节省内存；而构造函数内部的方法每个实例都会创建一份副本，占用更多内存，但对于频繁调用的方法，原型链查找稍慢于实例属性查找，不过这种差异在绝大多数业务中可忽略。

关于js继承实现的常见问题解答

js继承的实现方式有哪些

JavaScript 的继承实现方式主要有 6 种：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合继承，ES6 class 继承本质上是寄生组合继承的语法糖，是目前最推荐的写法。

ES6 class 继承与原型链继承有什么关系

ES6 class 继承的底层依然基于原型链，子类通过 `extends` 继承父类时，引擎会自动将子类的 `prototype` 的 `__proto__` 指向父类的 `prototype`，并通过 `super` 调用父类构造函数来初始化实例属性，理解原型链是掌握 class 继承的前提。

实际项目中应该选择哪种继承方式

如果项目兼容 ES6，直接使用 `class` 和 `extends` 即可，如果项目仍需支持 ES5 环境（如老旧浏览器或某些小程序平台），寄生组合继承是最佳选择，在大多数情况下，优先考虑组合而非继承，只有在明确存在“is-a”关系（如学生是人）时才使用继承，且继承层级尽量控制在两层以内。