图解ES6 Class的继承-你学费了吗？

为啥？

• 记录本篇文章是因为我全网都找不到 ES6 中class 的继承图就很烦，于是就只能自己动手绘制了，问题的起源是下面这个问题

   class A {}
  class B extends A {}
  
  const a = new A()
  const b = new B()
  
  console.log( a.__proto__ )
  console.log( b.__proto__ )
  console.log( B.__proto__ )
  console.log( B.prototype.__proto__ )
  console.log( b.__proto__.__proto__ )
  

• 我当是一看就裂开，源于对class的继承的极其模糊，ok废话不多说先来看看我的成果

Class 是语法糖也就是以更优雅的方式来封装类（但其本质内容不变），供用户使用；

讲一下Class中的疑惑：

1. Super ?
   实际上我们理解一下这句话
   在 constructor 中必须调用 super 方法，因为子类没有自己的 this 对象，而是继承父类的 this 对象，
   然后对其进行加工,而 super 就代表了父类的构造函数。super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，
   即 super 内部的 this 指的是 B，因此 super() 在这里相当于 ```A.prototype.constructor.call(this, props)``。
   也就是说我们联想到new 一个实例不也是要通过call来改变this 的指向吗，这里也是一样的我们继承了A原理也是要改变一下this的指向
   因此我们也可以理解为什么一定要只想一下super 方法，因为我们就是要通过super来实现继承的

2. Class 的原型链
   子类的__proto__属性，表示构造函数的继承，总是指向父类。
   子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

   class A {

   }
   class B extends A {

   }