ES6中的继承剖析

ES6中实现类的继承主要有这两个函数：

_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;
               //属性如果没有设置可枚举，则设置该属性为不可枚举，这里和es5不同，注意！

               descriptor.configurable = true;
               //设置该属性为可配置
               if ("value" in descriptor) descriptor.writable = true;
               //如果有值则设置为可改写
               Object.defineProperty(target, descriptor.key, descriptor);
               //使用es5的defineProperty函数来添加属性
          }
     }

     return function (Constructor, protoProps, staticProps) {
          //添加原型属性到原型上
          if (protoProps) defineProperties(Constructor.prototype, protoProps);
          //添加静态方法到类上
          if (staticProps) defineProperties(Constructor, staticProps);
          return Constructor;
     };
}();

 

_inherits

//核心函数，实现类的继承
function _inherits(subClass, superClass) {
     //判断类型是否正确
     if (typeof superClass !== "function" && superClass !== null) {
          throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
     }

     //设置子类的继承
     //superClass && superClass.prototype : 如果superClass不为null，那么就使用superClass.prototype，否在使用superClass
     //这个相当于es5的继承，想构建一个空对象，空对象中添加一个constructor属性指向子类构造函数，而这个空对象的__proto__指向
     //父类的原型，然后再将子类的prototype指向这个空对象，代码表示：
     //var obj = {constructor:subClass};obj.__proto__ = superClass.prototype;subClass.prototype = obj;
     subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });

     //添加父类的静态方法和属性
     //（静态方法和属性就是直接定义在构造函数上的方法和属性，这些方法不需要将构造函数实例化就可以使用，比如：
     //   Human.run = function(){console.log('run');}  (这是静态方法）
     //   Human.color = 'blue';   (这是静态属性）
     //   这些方法和属性可以通过Human.run和Human.color直接引用）
     //
     //因为根据原型链的继承方法是没有将父类的静态方法和属性继承下来的
     // es6就采用了设置构造函数的__proto__属性的方式来实现静态方法和属性的继承，因为es6不推荐直接设置__proto__，
     //所以可以使用setPrototypeOf和getPrototypOf来设置和查看
     // 这里需要注意一下：
     //__proto__并不是只有构造函数的实例才拥有的，所有的对象都有这么个属性（至于这个属性的由来什么的就自己百度吧）
     //为了了解为什么在构造函数上设置__proto__属性，你需要先知道继承静态方法和属性的效果；
     //比如上面的Human的例子，有个run的静态方法和color的静态属性，如果你实现了继承，那么你的Man构造函数也可以直接使用
     //run方法和color属性，即：Man.run()和Man.color。
     //这么看就很好理解了，run和color在Human上，为了在Man上可以使用就需要设置__proto__指向Human，这样根据原型链Man就
     //可以查找到父类的静态方法和属性
     //同时这里设置了__proto__之后，可以使用Object.getPrototypeOf(subClass).call(this,....)来复制父类的属性
     if (superClass)
          Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;

}