【JSベースシリーズ】es 6継承の具体的な使用

4987 ワード

今日はシリーズ第5編で、主に下一篇が残したes 6継承の具体的な使用問題についてお話しします.es 6継承に文法糖が使われているため、書き方がes 5の継承書き方と大きく異なるため、わざわざ持ち出して話しています.本題に戻りますが、以下に対応するキーワードの使い方を説明し、いくつかの例に合わせて説明します.
constructor

定義:クラスの構造関数です.

用法:newインスタンス化オブジェクトを使用すると、このメソッドが自動的に呼び出されます.

注意:クラスにはconstructorメソッドが必要です.明示的に定義されていない場合は、consructorメソッドがデフォルトで追加されます.コンストラクション関数を追加しなくても、デフォルトのコンストラクション関数があります.一般的なconstructorメソッドは、現在のインスタンスオブジェクトthisを返しますが、constructorメソッドがクラスのインスタンスではないインスタンスを返す新しいオブジェクトを返すように指定することもできます.

例を挙げます.

class Demo{
    say(){
        console.log('        ')
    }
}
const demo = new Demo()
console.log(demo)  // demo {__proto__:{constructor:###, say:function(){###}}}
demo.say()  //

上記の例ではDemoクラスが作成され、constructorメソッドは作成されません.インスタンス化されたオブジェクトdemoを印刷すると、そのオブジェクトの__が表示されます.proto__メソッドの下にはconstructorプロパティとsayメソッドがあるので、constructorメソッドが明示的に定義されていない場合、this(インスタンスを指す)を返すコンストラクション関数がデフォルトで追加されることを証明できます.
super

定義:親オブジェクト上の関数にアクセスするためのキーワードです.

用法:関数としてもオブジェクトとしても使用できます.すなわちsuper(…)またはsuperが存在する.xxx(...)という2つの使い方.単独でsuperを呼び出すとエラーが発生します

を関数として使用する場合(例を参照):

インスタンスオブジェクトをコンストラクション関数のプロパティに使用する場合は、constructorでsuperメソッドを呼び出す必要があります.サブクラスには独自のthisオブジェクトがなく、親のthisオブジェクトを継承しているため、superは親のコンストラクション関数を表します.superは親クラスの構造関数を表しますが、サブクラスのインスタンス、すなわちsuper内部のthisはサブクラスを指します.

クラスのプロトタイプメソッドを呼び出すだけであればconstructorでsuperメソッドを調整する必要はありません.

は、constructorメソッドで手動で1つの値を返すだけでよい.

//     super   
class Demo{
    construcor(){
        return 1
    }
    say(){
        console.log('      demo')
    }
}
const demo = new Demo()
demo.say() //       demo

-       ：
    -       ，         ；         super.print();            。
    -       ，    。    super     ，  es6              ，   console.log(super)     。
    ```
    // demo1，    
    class A {
        constructor() {
            this.x = 1
        }
        say(){
            console.log('  ')
        }
    }

    class B extends A {
        constructor() {
            super();
            super.x = 3;
            // super         ，                 
            console.log(super.x); // undefined
            // say             ，     
            console.log(super.say === this.say); // true
            console.log(this.x); // 3
        }
    }

    let b = new B();




    // demo2，        
    class A {
        static say() {
            console.log('  ')
        }
    }

    class B extends A {
        constructor() {
            super();
        }
        static action(){
            super.say()
        }
    }

    B.action()  //   
    ```

注:superの使い方はsuper()とsuper.####のみ()この2種類.この点は比較的特殊で、console.のようなsuperを直接単独で使用する場合.log(super)の場合、エラーが投げ出されます.

static

静的メソッドのキーワードを作成します.クラスはインスタンスのプロトタイプに相当し、クラスで定義されたすべてのメソッドはインスタンスによって継承されます.1つのメソッドの前にstaticキーを付けると、そのメソッドはインスタンスに継承されず、クラスによって直接呼び出されます.静的メソッド呼び出しは直接クラスで行われ、クラスのインスタンスでは呼び出されません.静的メソッドは、通常、ユーティリティ/ツール関数を作成するために使用されます.

new.target

定義:関数または構築方法がnew演算子によって呼び出されたかどうかを検出する.

new.targetで使用するシーン

new演算子によって初期化する関数または構築方法のうち、new.targetは、構築方法または関数への参照を返します.

通常の関数呼び出しでnew.targetの値はundefinedです.

栗を見る:

class A {
    constructor(name, age){
        this.name = name
        this.age = age
        console.log(new.target === A) // true
    }
    say() {
        // new.target === undefined
        console.log(`  ${this.name}，  ${this.age} ，  new.target  ：${new.target}`)
    }
}
const a = new A('  ', 20)
a.say()

まとめ

constructor

はクラスの構造関数です.

newインスタンス化オブジェクトを使用すると、このメソッドが自動的に呼び出されます.

super

は、親オブジェクト上の関数にアクセスするためのキーワードです.

は、関数として使用してもよいし、オブジェクトとして使用してもよい.すなわちsuper(…)またはsuperが存在する.xxx(...)という2つの使い方で、superを単独で呼び出すとエラーが発生します.しかし,super法を用いた2つの指向は異なる点には特に注意が必要である.

サブクラスconstructorがsuper()を呼び出すと、その内部thisはサブクラス

を指す.

がオブジェクトとして使用されます.

一般的な方法では、親のプロトタイプオブジェクト

を指す.