class继承做了什么？

目的

以babel编译的class继承为基础，了解目前class继承的原理

理解过程

babel编译结果

Reference: babel Try it out!

class a extends b{
  constructor(){
    super()
    this.c= "haha"
  }
}
复制代码

被编译为

继承做了什么？

第一步 _inherits(a,_b)实现继承

function _inherits(subClass, superClass) {
  if (typeof superClass !== 'function' && superClass !== null) {
    throw new TypeError('Super expression must either be null or a function');
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, 
    { constructor: { value: subClass, writable: true, configurable: true } });
  if (superClass) _setPrototypeOf(subClass, superClass);
}
复制代码

其中重要的是:

1、实现原型链继承：subClass.prototype.__proto__ = superClass.prototype

subClass.prototype = Object.create(superClass && superClass.prototype, 
    { constructor: { value: subClass, writable: true, configurable: true } });
解释：
    Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__；
    现有对象是superClass.prototype，新创建对象是subClass.prototype；
    将现有对象赋给新创建的对象的__proto__
结论：
    这一步实现了原型链的继承
复制代码

reference: MDN Object.create()

2、实现静态属性继承：subClass.__proto__ = superClass

function _setPrototypeOf(o, p) {
  _setPrototypeOf =
    Object.setPrototypeOf ||
    function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
  return _setPrototypeOf(o, p);
}
if (superClass) _setPrototypeOf(subClass, superClass);

解释：
    _setPrototypeOf(subClass, superClass)设置subClass的__proto__为superClass；
    这样所有通过subClass.property访问的属性如果在subClass上找不到，就会去superClass上找
结论：
    这一步实现了静态属性的继承
复制代码

第二步 return constructor返回构造函数

其中重要的是：

3、调用父类的构造函数：super()

function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
    return call;
  }
  return _assertThisInitialized(self);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - 
    super() hasn't been called");
  }
  return self;
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf
    ? Object.getPrototypeOf
    : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };
  return _getPrototypeOf(o);
}

_this = _possibleConstructorReturn(this, _getPrototypeOf(a).call(this));

解释：
    根据第一步的第二点subClass.__proto__ = superClass；
    于是_getPrototypeOf(a)返回的是a.__proto__也就是superClass；
    因此_this = superClass.call(this)；
    父类中挂在this上的属性就被挂到子类的this上了
结论：
    这一步实现了父类构造函数的调用
复制代码

结论

目前的class继承主要实现了以下继承效果

1、原型链继承

2、静态属性继承

3、调用父类构造函数以获得父类构造函数this上的属性

转载于:https://juejin.im/post/5cea3379f265da1b8466c163