【亡羊补牢】JS灵魂之问 第2期 JS的继承（ES6）

引言

原型和原型链这块是必备知识，今天我们就好好探讨一波！

探讨问题

ES6 extends 继承 怎么做的

我们先来看下面这段简单代码：

class Father {
  constructor(name){
    this.name = name
  }
  sayHi() {
    console.log('Hello ' + this.name)
  }
}

class Son extends Father {
  constructor(name,age){
    super(name)
    this.age = age
  }
  sayAge(){
    console.log(this.age)
  }
}

const son = new Son('Chocolate',20)
console.log(son.name)
console.log(son.age)
son.sayHi()
son.sayAge()
// Chocolate
// 20
// Hello Chocolate
// 20

其中这段代码里有两条原型链：

/* 实例原型链 */
console.log(son.__proto__ === Son.prototype) // true
console.log(Son.prototype.__proto__ === Father.prototype) // true
console.log(Father.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

/* 构造函数原型链 */
console.log(Son.__proto__ === Father) // true
console.log(Father.__proto__ === Function.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

结合代码和图可以知道。 ES6 extends 继承，主要就是：

1. 把子类构造函数(Child)的原型(__proto__)指向了父类构造函数(Parent)，
2. 把子类实例child的原型对象(Child.prototype)的原型(__proto__)指向了父类parent的原型对象(Parent.prototype)。

这两点也就是图中用不同颜色标记的两条线。

本文参考

若川博客 面试官问：JS的继承

木易杨说 JavaScript常用八种继承方案

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退