前端必会:ES5寄生继承 vs ES6 Class继承

大家好，我是谦！

说到继承，估计不少前端开发者都踩过坑。尤其是在 ES5 到 ES6 的过渡阶段，我们写代码时常常被问到：“你用的是原型继承还是 Class 继承？”再加上面试官特别喜欢追问底层实现——“继承到底是怎么做的？”一旦答不上来，很可能就与机会失之交臂。今天我想用通俗的语言聊聊 JavaScript 中的继承机制，同时对比一下 ES5 和 ES6 的不同写法，帮大家在下一次面试时多几分底气。

在进入具体代码之前，有必要先澄清一个关键概念：JavaScript 是一门基于原型的语言，它并没有 Java、C++ 那类“传统类式继承”，所有继承机制底层都是在操作原型链。不管你用的是 Class 语法，还是用 Function 模拟继承，最终都会回归到 prototype 这一套体系。理解这一点，后续的内容就更容易掌握了。

我们先从 ES5 讲起。那个时候还没有 Class 语法糖，大家都借助构造函数和原型链来实现继承。比如，假设我们要写一个“动物”构造函数：

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayHi = function() {
  console.log("Hi, I'm " + this.name);
};

这时候我要搞一个“狗”的类继承“动物”，常见的写法就是：

function Dog(name, breed) {
  Animal.call(this, name); // 继承属性
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 继承方法
Dog.prototype.constructor = Dog; // 修正 constructor 指向

注意三个关键点：
1. Animal.call(this, name)：用于继承父类构造函数中的属性（如 this.name），若缺失则子类实例无法访问父类属性。
2. Object.create()：将 Dog.prototype 的原型链指向 Animal.prototype，使子类实例可调用父类方法。
3. 修正 constructor：需手动设置 Dog.prototype.constructor = Dog，否则 dog.constructor 会错误指向 Animal，导致原型链关系混乱。

此写法在 ES5 时代是标准方案，但存在代码冗余度高、易遗漏步骤（如忘记修正 constructor）等问题。

反观 ES6，通过 class 和 extends 实现继承，语法更简洁直观。沿用上述动物示例，其 ES6 实现如下：

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
}

看起来是不是清爽多了？一句 extends 就搞定继承，super 负责调用父类构造函数。而且我们再也不用手动处理 Object.create 或是修正 constructor，引擎在背后自动完成了这些操作。

不过 ES6 的写法也有需要注意的地方。比如在子类的构造函数中，super 必须优先调用，否则 this 无法使用。刚开始接触 ES6 时，我就多次遇到 “Cannot access 'this' before super” 的错误提示，确实令人困扰。后来才逐渐理解，这是 JavaScript 的设计所决定的强制性规则。

还有一个关键细节：ES6 的 class 本质上仍是语法糖，底层机制依然是基于原型的。使用 typeof Animal 检测，结果仍然是 "function"。所以说，继承的本质没有改变，ES6 只是让语法更加优雅，更贴近传统面向对象语言的写法，提升了代码的可读性。

那么，ES5 和 ES6 的继承到底有什么区别？我认为最大的差异在于写法的简洁性与可维护性。ES5 的写法虽然灵活，但显得繁琐；ES6 的写法更加规范，但也需理解一些隐藏机制，例如 super 的实际工作原理。如果你的项目需要兼容旧版环境（如老版本 IE），那只能继续使用 ES5；若运行环境是现代浏览器，则可以放心采用 ES6，写起来更加高效省心。

比如之前的一个遗留系统，完全基于 ES5 编写，其中继承部分的代码异常混乱，充斥着各种 call、apply 和 Object.create，令人眼花缭乱。后来我们使用 ES6 的 class 语法进行了重构，代码量大幅减少，可读性也显著提升。最直观的感受是，新成员能够迅速理解代码结构，不再被复杂的原型链绕晕。

但也要提醒大家，ES6 并非完美无缺。例如 JavaScript 中的多重继承一直是一个棘手的问题，使用 class 只能实现单继承，若想实现混入（mixin）仍需借助一些技巧性的写法。这说明继承并不是万能解决方案，在项目中滥用继承反而可能增加维护难度。很多时候，组合（composition）比继承更值得推荐。例如实现一个“会跑的机器人”，我们可以将“跑步”能力作为独立模块组合进来，而不必强行从“动物”继承。

总结来说：ES5 的继承是“手动管理原型链”，ES6 的继承则是“用语法糖封装的原型继承”。如果在面试中遇到这一问题，最好从原型链讲起，再分别举例说明，最后可补充“继承与组合的对比”，这样既能体现扎实的基础，也能展示思考的深度。

说到底，继承只是 JavaScript 实现面向对象编程的一种方式。ES5 提供了足够的灵活性，但写法较为繁琐；ES6 提供了更友好的语法，但需明白其底层仍是基于原型。至于具体选择哪种方式，应基于项目背景和团队习惯。就目前而言，已经 2025 年，我们实在没有太多理由继续坚守 ES5。若你仍遇到采用原始写法的项目，可能需要做好“救火队员”的心理准备。

好了，继承这个话题就先聊到这里。我很想知道大家在实际项目中更倾向于使用 class，还是认为原型链写法更加灵活？

本篇分享就到此结束啦！大家下篇见！白~

点赞关注不迷路！分享了解小技术！走起！