es6中Class转成es5原理

首先创建一个Parent父类

class Parent {
  constructor(name) {
    this.name = name;// 实例的私有属性
  }

  // 属于实例的公有属性，也就是相当于原型上的属性
  getName() {
    console.log(this.name);
  }
}

let p = new Parent('xxx');
p.getName();

复制代码

我们可以打开Babel，将上述代码复制后粘贴到Bable中，可以得到es2015的源码，如下代码：

'use strict';

var _createClass = function () {
  // target是目标对象，此处是Parent,porps是属性对象数组
  function defineProperties(target, props) {
    // 循环每个元素
    for (var i = 0; i < props.length; i++) {
      // 取出每个属性描述器（这里是一个对象）
      var descriptor = props[i];
      // 可枚举:for in 能循环出来
      descriptor.enumerable = descriptor.enumerable || false;
      // 可配置：可以通过delete删除此属性
      descriptor.configurable = true;
      // 若属性描述器中的value存在，则可修改值
      if ("value" in descriptor) descriptor.writable = true;
      // 真正的向Parent类的原型对象上增加属性
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  // 三个参数分别是 构造函数、原型上的属性、静态属性（类上的属性）
  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();


function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Parent = function () {
  // 这个方法就相当于构造器constructor
  function Parent(name) {
    _classCallCheck(this, Parent);

    this.name = name; // 实例的私有属性
  }

  // 属于实例的公有属性，也就是相当于原型上的属性
  _createClass(Parent, [{
    key: 'getName',
    value: function getName() {
      console.log(this.name);
    }
  }]);

  return Parent;
}();

var p = new Parent('xxx');
p.getName();
复制代码

1.Parent(name):相当于es6中的构造函数。

2._classCallCheck(instance,constructor)：类的调用检查，其中有俩个参数，第一个参数是当前实例，第二个参数是构造函数，如果这个实例（instance）不是这个构造函数（Parent）的实例的话,就报错Cannot call a class as a function,不能把一个类当成普通函数来调用，即只能够使用new Parent('xxx')的形式创建，使用new关键字,而不是直接Parent('xxx')，当做一个普通的函数调用。

3._createClass：自执行，且返回一个函数，该函数有3个参数，分别是构造函数、原型上的属性、静态属性（类上的属性）

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