明白ES6继续extends

1.在es6中对继续有了更友爱的体式格局。鄙人面的继续中那到底在extends的时刻做了什么，super()又是代表什么意思。

class People{
constructor(name, age) {
  this.name = name;
  this.age = age;}
  
say(){
  alert("hello")}
  
static see(){
  alert("how are you")}}

class lily extends People{
  constructor(){
     super()}
  goodbye(){alert("goodbye")}}

2.剖析extends和super()

• ①在前面的文章中有说起class声明类的道理：https://segmentfault.com/a/11…

• ②lily是People的子类，起首lily也是一个类；extends的历程当中建立了一个自实行函数，并将父类传进去，继续父类以后再返回该子类。lily.__proto__指的是当前对象所属类的原型,也就是Object.getPrototypeOf(lily).

  var lily = function(_People) {
     inherits(lily, _People);  //第一步，继续父类原型
     function lily() {         //第二步，继续父类对象属性
       return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
     createClass(lily, [{     //第三步，建立子类本身的要领
      key: "goodbye",
      value: function goodbye() {
      alert("goodbye");}}]);
     
     return lily;
   }(People);

• ③继续的历程：平常继续分两步，call继续+原型的继续 （离别继续父类对象属行和原型属性）

  • 第一步：继续父类的原型，经由过程Object.create，第一个参数是建立一个对象的原型，定义原型上的属性constructor指向subclass；把父类的原型要领继续给子类原型；

    function inherits(subClass, superClass) {
       subClass.prototype = Object.create(superClass && superClass.prototype, {
         constructor: {
           value: subClass,
           enumerable: false,
           writable: true,
           configurable: true
         }
       });
       if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
     }

  • 第二步：call继续，就是super()的处置惩罚历程，super()的本质就是People.call(this);把父类的对象要领继续给子类对象；这也是为何在es6的继续时必需要加上super()，由于不加的话没法继续到父类的对象属性。

    function _possibleConstructorReturn(self, call) { 
       //call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
       return call && (typeof call === "object" || typeof call === "function") ? call : self;

  • 第三部：建立子类本身的要领。 能够参考class内里的完成历程。

总的来说es6的extends的本质和之前的继续体式格局是一致 的，但是有了更好的，更清楚的表现形式。