# ES6-Class

ES6 的class可以看作只是一个语法糖，注意以下几个可能会犯错误的点。

# 1. 实例属性和原型方法

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层（等于号赋值）。

类中的方法是定义在原型链上（Animal.prototyp），包括getter/setter函数。

详细可看Babel Class解析为ES5的代码 (opens new window) (opens new window)

    class Animal {
      // 实例属性，定义在类实例对象上（a.speak1)
      name = 'MyAnimal'
      speak1 = () => {
        return this
      }
    
      // 原型链方法，定义在原型上（Animal.prototype.speak）
      speak() {
        return this;
      }
      // get也是定义在原型上（Animal.prototype.[get getName]）
      get getName() {
        return this.name
      }
    }
    
    const a = new Animal()
    console.log(a) // { name: 'MyAnimal', speak1: f , __proto__: {constructor, speak, ...} }
    

# 2. this 指向

实例属性this在定义时就已确定指向当前实例（箭头函数）。

类的方法（包括get/set函数）this默认指向当前实例，但一旦遇到解构时（上下文环境变化），this的值可能变化。

    class Animal {
      // 实例属性。this在书写代码时，就已经确定为当前实例对象（箭头函数）
      speak1 = () => {
        console.log(this, 'speak1') // 在代码
        return this
      }
    
      // 原型链方法。this依赖于运行环境，默认是当前实例对象
      speak() {
        console.log(this, 'speak')
        return this;
      }
    }
    
    let a = new Animal()
    a.speak() // a
    a.speak1() // a
    
    let { speak, speak1 } = a
    speak() // undefined。重要：解构后原型链上的方法，this为undefined
    speak1() // a
    

# 3. 继承时的原型链

类继承时，属性是直接继承，而原型链上的方法是一层一层的继承。

    class B extends Animal {
        b1 = () => {
            console.log(this)
        }
        b() {
            console.log(this)
        }
    }
    
    // B(属性)->B.prototype -> A.prototype
    console.log(new B()) // { speak1, b1, __proto__(B): {b, __proto__(A): {speak} } }
    
    class C extends B {
        c1 = () => {
            console.log(this)
        }
        c() {
            console.log(this)
        }
    }
    // C(属性) -> C.prototype ->B.prototype -> A.prototype
    console.log(new C()) // { speak1, b1, c1, __proto__(C): {c, __proto__(B): {b, __proto__(A):{speak} } } }
    

# 4. ES5和ES6继承的不同

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。

ES6的继承则不同，在单重继承时，基本同ES5一致；当多重继承时，子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。详细看以下babel es6转es5 _possibleConstructorReturn应用。

es6：

    class Person {
      static body = 'bofy';
      constructor(age) {
        this.name = 123
        this.age = age
      }
    
      getName() {
        return this.name
      }
    }
    
    class Doctor extends Person {
        constructor(age) {
          super(age)
          this.skill = 'shoushu'
        }
    }
    
    // 多重继承
    class Superman extends Doctor {
    }
    
    var d = new Doctor(35)
    d.name
    

babel 转译为 es5：

    "use strict";
    
    function _typeof(obj) {
      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
          return typeof obj;
        };
      } else {
        _typeof = function _typeof(obj) {
          return obj &&
            typeof Symbol === "function" &&
            obj.constructor === Symbol &&
            obj !== Symbol.prototype
            ? "symbol"
            : typeof obj;
        };
      }
      return _typeof(obj);
    }
    
    function _possibleConstructorReturn(self, call) {
      // call有值，则返回call
      if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
      }
      return self
    }
    
    function _getPrototypeOf(o) {
      // setPrototypeOf是ES6提案
      _getPrototypeOf = Object.setPrototypeOf
        ? Object.getPrototypeOf
        : function _getPrototypeOf(o) {
            // getPrototypeOf在ES5就有，只是ES6中有一些改动
            return o.__proto__ || Object.getPrototypeOf(o);
          };
      return _getPrototypeOf(o);
    }
    
    // 原型链继承
    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 }
      });
      // 设置subClass.__proto__ = superClass，为的是getPrototypOf时能拿到superClass这个构造函数。
      if (superClass) _setPrototypeOf(subClass, superClass);
    }
    
    function _setPrototypeOf(o, p) {
      _setPrototypeOf =
        Object.setPrototypeOf ||
        function _setPrototypeOf(o, p) {
          o.__proto__ = p;
          return o;
        };
      return _setPrototypeOf(o, p);
    }
    
    function _instanceof(left, right) {
      if (
        right != null &&
        typeof Symbol !== "undefined" &&
        right[Symbol.hasInstance]
      ) {
        return right[Symbol.hasInstance](left);
      } else {
        return left instanceof right;
      }
    }
    
    // 只允许new方式创建class
    function _classCallCheck(instance, Constructor) {
      if (!_instanceof(instance, 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) {
      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
      if (staticProps) _defineProperties(Constructor, staticProps);
      return Constructor;
    }
    
    function _defineProperty(obj, key, value) {
      if (key in obj) {
        Object.defineProperty(obj, key, {
          value: value,
          enumerable: true,
          configurable: true,
          writable: true
        });
      } else {
        obj[key] = value;
      }
      return obj;
    }
    
    var Person =
      /*#__PURE__*/
      (function() {
        function Person(age) {
          // 检查必须使用new关键字创建类实例
          _classCallCheck(this, Person);
    
          this.name = 123;
          this.age = age;
        }
    
        // class中的方法，都是在Person.prototype
        // class中的静态属性，都是在Person上
        _createClass(Person, [
          {
            key: "getName",
            value: function getName() {
              return this.name;
            }
          }
        ]);
    
        return Person;
      })();
    
    _defineProperty(Person, "body", "bofy");
    
    var Doctor =
      /*#__PURE__*/
      (function(_Person) {
        // Doctor继承自Person
        // Doctor.prototype.__proto__ === Person.prototype(因为Doctor.prototype = Object.create(Person.prototype))
        // Doctor.__proto__ === Person(因为Object.setPrototypeOf(Doctor, Person))
        _inherits(Doctor, _Person);
    
        function Doctor() {
          var _this;
    
          _classCallCheck(this, Doctor);
    
          /**
           * 子类必须在constructor方法中调用super方法，否则新建实例时会报错。
           * 等同于
           * _this = Person.call(this, age) ？Person.call(this, age)   : this
           * 在单重继承时，Person.call()执行后返回空；多重继承时， Person.call()有值返回
          * **/
          _this = _possibleConstructorReturn(
            this,
            _getPrototypeOf(Doctor).call(this, age)
          );
    
          _this.skill = "shoushu";
          // 返回this。在多重继承中，this是父类的this（即：子类实例的构建，基于父类实例。）
          return _this;
        }
    
        return Doctor;
      })(Person);
    
    var Superman =
    /*#__PURE__*/
    function (_Doctor) {
      _inherits(Superman, _Doctor);
    
      function Superman() {
        _classCallCheck(this, Superman);
    
        /**
          * class有多重继承特征，此时子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。
        **/
        return _possibleConstructorReturn(this, _getPrototypeOf(Superman).apply(this, arguments));
      }
    
      return Superman;
    }(Doctor);
    
    var d = new Doctor(35);
    d.name;