es6的class类转为es5的function构造函数分析

我们先定义一个Preson类

class Person {
	constructor(name,age){
      this.name = name
      this.age = age
    }
  eating(){
  
  }
  static running(){}
}

class student extends Person {
constructor(name,age,sno){
  super(name,age)
      this.sno = sno
    }
  studying(){}
}

然后用Babeljs工具转换为function代码

function _typeof(obj) {
  "@babel/helpers - typeof";
  return (
    (_typeof =
      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
        ? function (obj) {
            return typeof obj;
          }
        : function (obj) {
            return obj &&
              "function" == typeof Symbol &&
              obj.constructor === Symbol &&
              obj !== Symbol.prototype
              ? "symbol"
              : typeof obj;
          }),
    _typeof(obj)
  );
}
// 继承函数 subClass 为子类, supreClass 为父类
function _inherits(subClass, superClass) {
  // 边界判断 父类要为函数或者null,否者扔出异常
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  // 通过Object.create方法创建一个对象,并且该对象的__proto__ 指向 父类的显示原型,并且该对象含有一个属性constructor,值为子类构造函数
  // 即 subClass.prototype = {...,constructor:subClass,__proto___:superClass.prototype }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { value: subClass, writable: true, configurable: true }
  });
  Object.defineProperty(subClass, "prototype", { writable: false });
// 这一步是为了子类能继承父类的静态方法 =》 subClass.__proto__ = superClass 以后调用subClass.running可以随着原型链找到父类定义的静态方法
  if (superClass) _setPrototypeOf(subClass, superClass);
}

// 将p的值赋值给o的o.__proto__
function _setPrototypeOf(o, p) {
  _setPrototypeOf =
    Object.setPrototypeOf ||
    function _setPrototypeOf(o, p) {
    // 将子类的__proto__ 指向 父类
      o.__proto__ = p;
      return o;
    };
  return _setPrototypeOf(o, p);
}

// 拿到父类的函数
function _createSuper(Derived) {
  // 判断是否支持Reflect
  var hasNativeReflectConstruct = _isNativeReflectConstruct();
  return function _createSuperInternal() {
    // 拿到子类的o.__proto__,(在前面我们将 subClass.__proto__ = superClass) 也就是 父类(superClass) 赋值给 Super
    var Super = _getPrototypeOf(Derived),
      result;
    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      // 调用父类构造函数
      result = Super.apply(this, arguments);
    }
    return _possibleConstructorReturn(this, result);
  };
}

// 边界判断
function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  } else if (call !== void 0) {
    throw new TypeError(
      "Derived constructors may only return object or undefined"
    );
  }
  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;
}

// 判断是否支持Reflect
function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;
  try {
    Boolean.prototype.valueOf.call(
      Reflect.construct(Boolean, [], function () {})
    );
    return true;
  } catch (e) {
    return false;
  }
}

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

// 检测类的调用方法,不能 Preson()来调用
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

// 设置属性
function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  // 将protoProps属性添加到Constructor.prototype上
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  // 将静态方法 staticPropss属性添加到Constructor上 以便 通过类调用
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", { writable: false });
  return Constructor;
}

var Person = /*#__PURE__*/ (function () {
  // new Preson() 会调用此函数
  function Person(name, age) {
    // 检查是否时 new调用的 (new 调用时,this指向该实例,直接调用时,指向window)
    _classCallCheck(this, Person);

    this.name = name;
    this.age = age;
  }

  // 为类的显示原型添加方法
  _createClass(Person, [
    {
      key: "eating",
      value: function eating() {}
    }
  ]);

  return Person;
})();

var student = /*#__PURE__*/ (function (_Person) {
  // 子类继承父类的方法 =》 student.prototype = {...,constructor:student,__proto___:_Person.prototype }
  _inherits(student, _Person);
  // 拿到_createSuper(student)返回的函数,后面会调用
  var _super = _createSuper(student);
  // new Student() 会调用此函数
  function student(name, age, sno) {
    var _this;
    // 检查是否时 new调用的 (new 调用时,this指向该实例,直接调用时,指向window)
    _classCallCheck(this, student);
    // 调用_super函数并绑定this 里面会执行父类的构造方法,并且会将this返回
    _this = _super.call(this, name, age);
    _this.sno = sno;
    return _this;
  }
   // 为类的显示原型添加方法
  _createClass(student, [
    {
      key: "studying",
      value: function studying() {}
    }
  ]);

  return student;
})(Person);
posted @ 2022-02-23 14:38  coderlq  阅读(561)  评论(0)    收藏  举报