阅读 99

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上的属性

关注下面的标签,发现更多相似文章
评论