溫習一下ES6 中的關於類的語法

定義一個類

class Animal {
    constructor(){
        this.type = 'animal';
    }
    speak(){
        console.log(this.type);
    }
}

相當於下面ES5的如許的寫法

function Animal(){
   this.type = 'animal';
}

Animal.prototype.speak = function(){
   console.log(this.type);
}

類的繼續

class Animal {
    constructor(){
        this.type = 'animal';
    }
    speak(){
        console.log(this.type);
    }
}

class Cat extends Animal {
    constructor(){
        super();
        this.type = 'cat'
    }
}

相當於下面ES5的寫法

function Animal(){
   this.type = 'animal';
}

Animal.prototype.speak = function(){
   console.log(this.type);
}

function Cat(){
  Animal.call(this);
  this.type = 'animal';
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;//由於上一步形成constructor為Animal

//或許能夠把上邊的兩行改成下面如許的寫法
Cat.prototype = Object.create(Animal.prototype, {
  constructor: Cat,
});

super上台

從上邊的例子能夠已明白了super的一些用法了。然則還不周全。super在類的繼續中，有兩個用法

1. 作為函數運用，如上邊的例子中的super()
2. 作為對象運用， 如super.type

1. 把super作為函數運用

在類的繼續中，子類假如顯式的聲清楚明了組織函數，則必需起首挪用super，不然會找不到this。此時super代表父類的組織函數。這時候在組織函數里挪用super（），相當於 parentConstructor.call(this). 照樣以上邊的現實例子為例。

class Cat extends Animal {
    constructor(){
        super();   // 相當於  Animal.call(this)
        this.type = 'cat'
    }
}

如今再詮釋一個疑問。假如在繼續中子類壓根不寫組織函數呢？不過不寫，相當於也寫了。只是組織函數用的是父類的組織函數

class Cat extends Animal {
}

// 相當於
class Cat extends Animal {
    constructor(...args){
             super(...args);
    }
}

2.把super作為對象運用

super作為對象時，在一般要領中，指向父類的原型對象；在靜態要領中，指向父類。

在一般要領中，指向父類的原型對象，下面舉例

class Animal {
    constructor(){
        this.type = 'animal';
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = 'cat'
               console.log(super.type)
    }
}
new Cat();  // 此處打印出來的是type on propotype，而不是animal

在靜態要領中指向父類

class Animal {
  static type = 'this is static type';
    constructor(){
        this.type = 'animal';
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = 'cat'
    }
  static miao(){
    console.log(super.type);  // 這裏輸出的是this is static type，而不是animal或許type on propotype
  }
}

Cat.miao()