es6 のクラスの簡単な理解 (例付き)

この記事は、es6 のクラスを簡単に理解できるものです (例を示します)。必要な方は参考にしていただければ幸いです。

#クラスのクラス

基本的な概念を記録し、後で理解を深めることができます

#クラスとは何かを理解する

クラスとは何ですか? 1 つ作成して、

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo のプロトタイプを見てみるのもよいでしょう。これらの 3 つの属性はトラバース可能ではなく、Demo クラスと比較して追加の __proto__ プロトタイプ チェーンがあることがわかります。新しいデモを見てみましょう

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

実際、Demo クラスは Demo インスタンスのプロトタイプと同等です

クラス内のコンストラクター

私の意見では、

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

この部分はes5のコンストラクタの機能に相当します。newの処理では値を代入して返すので、オブジェクトを返すとインスタンスオブジェクトになります。コンストラクター内で null に等しくない場合、インスタンス オブジェクト これは return の値であり、es5 コンストラクターと同じ効果があります

クラスのメソッド

    f() {
        return this;
    }

このメソッドは最終的にはインスタンス オブジェクトのプロトタイプ チェーンに属します

通過不可能なメソッド

。したがって、インスタンス オブジェクトでも使用できます

新しい知識ポイント

クラスの静的メソッド

は、メソッドがインスタンスによって継承されず、クラスを通じて直接呼び出されることを意味します

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

静的メソッドの This はクラス自体を指しますが、

this はクラス自体を指します。 a = this

インスタンス オブジェクト自体を指します

静的メソッドはサブクラスから継承できます

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

静的メソッドはスーパー オブジェクトから呼び出すことができます

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

クラスは内部的には静的メソッドのみで、静的属性はありません

クラス式の即時実行

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

クラスクラス宣言には変数がありません

new.target属性の改善

は、new の後にオブジェクトを返すことです。たとえば、es5 のコンストラクター f は、new 呼び出しを通じて unknown を返しませんが、new 呼び出しを通じてコン​​ストラクター自体を返します。

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

クラス class では、クラス自体が返されます。が返されます。これは静的メソッドの場合と同じです。new はそれがどのクラスであるかを返します。

以上がes6 のクラスの簡単な理解 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。