ES6篇

一段相符ES6语法的代码

    class a{
      constructor(y,z){
        this.y =y;
        this.z =z;
      }
      render(){
        console.log(1)
      }
    }
    
    class b extends a{
      constructor(m,n){
        super();
        this.m=m;
        this.n=n;
      }
      
      render(){
        console.log(2);
      }
    }

我在babel官网上输入，检察转码(),代码长许多，从中找出症结点：

• class

• constructor

• extend

• super

class

声明class class a(){}
检察对应转码 var a = function(){return a}()
能够看出声明一个class就是经由过程建立并实行一个匿名函数，在这个匿名函数中声明function a,末了返回a。

constructor

 
 constructor(y,z){
        this.y =y;
        this.z =z;
     }
     

对应转码:

function a(y, z) {
        _classCallCheck(this, a);

        this.y = y;
        this.z = z;
    }
    

将_classCallCheck(this,a)提出

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

这个方面等于揣摸this的[[prototype]]是不是有指向a.prototype的对象。等于揣摸底本是不是是有a这个function。？？觉得诠释的不好。
然后再在a(实质是function，但能够被称作class)中声明属性y，z。
接下来，在class a中有一个render要领，

_createClass(a, [{
    key: "render",
    value: function render() {
      console.log(1);
    }
}]);

经由过程_createClass要领，能够给a增加render要领。

将_createClass提出来看。

var _createClass = 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);//给target增加属性
      } 
    }
    // 返回函数
    return function (Constructor, protoProps, staticProps) { 
        if (protoProps) defineProperties(Constructor.prototype, protoProps); 
        if (staticProps) defineProperties(Constructor, staticProps); 
        return Constructor; 
    }; 
}();//马上实行

由上揣摸es6给class增加的属性、要领背地是es5对给对象增加属性的要领。

extend

一样再转码中，找到了对应的_inherits(b, _a)

function _inherits(subClass, superClass) { 
    // 确保superClass为function
    if (typeof superClass !== "function" && superClass !== null) { 
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    } 
    // subClass.prototype的[[prototype]]关联到superClass superClass.prototype
    // 给subClass增加constructor这个属性
    subClass.prototype = Object.create(superClass && superClass.prototype, { 
        constructor: { 
            value: subClass, 
            enumerable: false, 
            writable: true, 
            configurable: true 
        } 
    });
    // 设置subclass的内置[[prototype]]与superClass相关联
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

能够看出extend背地是经由过程js的原型链完成的。
个中在class b extends a中要将a传入b中。

super

个中对应的转码：

function b(m, n) {
    _classCallCheck(this, b);

    var _this = _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this));

    _this.m = m;
    _this.n = n;
    return _this;
  }

个中_possibleConstructorReturn完成了super的道理。

function _possibleConstructorReturn(self, call) {
  if (!self) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 
  } 
  //显现绑定b的内置[[prototype]]到this，即在b中实行b原型链上关联的属性。
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}