深度剖析 JavaScript 继承模式，打破思维壁垒
2023-12-04 10:59:38
为什么你老是讲不清楚 JavaScript 的继承模式
前言
相信很多人在遇到面试中都遇到过被问到过 JavaScript 继承模式的问题，都能手写出几种继承模式的代码例子，但为什么面试官却对你的回答不是很满意或者压根就没听懂，个人觉得应该是缺少自己的一个答题思路，没有对继承有一个全局的了解，这种就像你看到一个美女只是看到了她漂亮的外表，却没有真正了解她内心是个什么样的人，而在学习继承的时候也是一样，光看到它表面呈现出来的继承效果，没有真正去了解继承背后的运行机制，所以搞不懂面试官在问什么。
一、为什么要使用继承
在开发项目的过程中，对象实例往往具有相同的属性和方法，如果使用传统的面向过程开发方式，则需要在每个对象中重复定义相同的属性和方法，这会造成代码冗余和维护困难。为了解决这个问题，JavaScript 提供了继承机制，允许对象从其他对象继承属性和方法，从而实现代码复用。
二、JavaScript 继承模式
JavaScript 的继承模式主要分为原型链继承、构造函数继承、组合继承、寄生式继承、借用构造函数和 ES6 类继承。
- 原型链继承
原型链继承是 JavaScript 中最基本的继承模式，它通过原型对象实现继承。原型对象是一个特殊的对象，它包含着对象的属性和方法。当一个对象被创建时，它会自动继承其原型对象的所有属性和方法。
- 构造函数继承
构造函数继承是另一种常见的 JavaScript 继承模式，它通过构造函数来实现继承。构造函数是一个特殊的函数，它负责创建对象并初始化对象属性。当一个对象被创建时，它会调用其构造函数，构造函数会为对象设置属性和方法。
- 组合继承
组合继承是原型链继承和构造函数继承的结合，它通过原型对象和构造函数来实现继承。组合继承既可以继承原型对象上的属性和方法，也可以继承构造函数上的属性和方法。
- 寄生式继承
寄生式继承是一种特殊的继承模式，它通过创建一个新的对象来实现继承。新对象继承了另一个对象的属性和方法，但新对象不与原对象共享相同的原型对象。
- 借用构造函数
借用构造函数是一种简单的继承模式，它通过调用另一个对象的构造函数来实现继承。借用构造函数不创建新的原型对象，而是直接使用另一个对象的原型对象。
- ES6 类继承
ES6 类继承是 JavaScript 中的新增继承模式，它通过 class 来实现继承。ES6 类继承语法更简洁，更符合现代编程语言的风格。
三、JavaScript 继承模式的优缺点
- 原型链继承
优点：
- 实现简单，容易理解。
- 性能优异，因为对象直接从原型对象继承属性和方法，无需通过构造函数调用。
- 节省内存，因为多个对象共享同一个原型对象，无需为每个对象单独分配内存空间。
缺点：
- 不支持多重继承。
- 子对象不能继承父对象的私有属性和方法。
- 子对象对父对象的修改会影响到所有其他从该父对象继承的子对象。
- 构造函数继承
优点：
- 支持多重继承。
- 子对象可以继承父对象的私有属性和方法。
- 子对象对父对象的修改不会影响到其他从该父对象继承的子对象。
缺点：
- 实现复杂，不容易理解。
- 性能较差，因为每次创建对象时都需要调用构造函数。
- 占用内存较大，因为每个对象都需要单独分配内存空间。
- 组合继承
优点：
- 结合了原型链继承和构造函数继承的优点。
- 支持多重继承。
- 子对象可以继承父对象的私有属性和方法。
- 子对象对父对象的修改不会影响到其他从该父对象继承的子对象。
缺点：
- 实现复杂，不容易理解。
- 性能较差，因为每次创建对象时都需要调用构造函数。
- 占用内存较大，因为每个对象都需要单独分配内存空间。
- 寄生式继承
优点：
- 实现简单，容易理解。
- 性能优异，因为对象直接从原型对象继承属性和方法，无需通过构造函数调用。
- 节省内存，因为多个对象共享同一个原型对象，无需为每个对象单独分配内存空间。
缺点：
- 不支持多重继承。
- 子对象不能继承父对象的私有属性和方法。
- 子对象对父对象的修改会影响到所有其他从该父对象继承的子对象。
- 借用构造函数
优点：
- 实现简单，容易理解。
- 性能优异，因为对象直接从原型对象继承属性和方法，无需通过构造函数调用。
- 节省内存，因为多个对象共享同一个原型对象，无需为每个对象单独分配内存空间。
缺点：
- 不支持多重继承。
- 子对象不能继承父对象的私有属性和方法。
- 子对象对父对象的修改会影响到所有其他从该父对象继承的子对象。
- ES6 类继承
优点：
- 语法简洁，更符合现代编程语言的风格。
- 支持多重继承。
- 子对象可以继承父对象的私有属性和方法。
- 子对象对父对象的修改不会影响到其他从该父对象继承的子对象。
缺点：
- 仅适用于 ES6 及以上版本
