ES 6のClassのキーワードsuper

ES 6のクラスに関する文法を復習します

クラスの定義

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

以下のES 5に相当するこのような書き方

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'
    }
}

以下のES 5に相当する書き方

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クラスの継承には2つの使い方があります

は、上記の例のsuper()

のような関数として用いられる.

は、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()