本文共 1814 字，大约阅读时间需要 6 分钟。

JS中的三种继承模式

写在前面：如果此篇博客中有任何错误的地方，欢迎大家的指正！让我们共同进步！

JS中的继承模式大体分为三种：

接下来让我们逐个的对其进行剖析。

方式一、继承模式-原型链继承

为了更好的理解为什么要这样做，我们来看一看这样做的图示：

代码核心思路：

通过将子类型的原型赋为父类型的一个实例对象，使得在创建子类的实例对象的时候可以逐步通过__proto__属性（隐式原型链）查找到父类的方法。

注意：

弊端思考：

①如果我们这样输出：

图示理解如下：我们通过sub调用constructor，实际是从原型链依次查找，最终只在Supper的Prototype中查找到的constructor,因此指向的是Supper()。

重新定向Sub.prototype.constructor = Sub;（代码的38句）

如此即可将这个bug消除。

方法二、继承模式-借用构造函数继承

执行结果如下：

通过整合第一种方法和第二种方法的思路，进而有了第三个方法——组合继承。

方式三、继承模式-组合继承

组合的方法分为两步

接下来让我们看一个实例。

但是在实际代码书写时，这样constructor也会被for…in遍历到，

function Dog() {     this.name = 'puppy'}Dog.prototype.bark = () => {     console.log('woof!woof!')}function BigDog() {   }BigDog.prototype = new Dog()// 修复constructor的指向Object.defineProperty(BigDog.prototype, "constructor", {           value: BigDog,        enumerable: false,      })const bigDog = new BigDog()console.log(bigDog.constructor === BigDog)

如果用上面两个问题去测试，会发现ES6中的class实际是上面这种写法的语法糖实现。

class Cat {       constructor(props) {         this.name = 'puppy'    }  }class BigCat extends Cat {       constructor(props) {         super(props)    }}const bigCat = new BigCat()console.log(bigCat.constructor === BigCat) //truefor(let i in bigCat){   console.log(i)} // 不会出现constructor属性