es6 のクラスの簡単な理解 (例付き)-jsチュートリアル-php.cn

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

不言

リリース： 2018-10-25 15:43:33

転載

1819 人が閲覧しました

この記事は、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 サイトの他の関連記事を参照してください。

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

私の意見では、

通過不可能なメソッド

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
ログイン後にコピー

function f() { return new.target; } console.log((new f()) === f); //true
ログイン後にコピー

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

私の意見では、

通過不可能なメソッド

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ログイン後にコピー

function f() { return new.target; } console.log((new f()) === f); //trueログイン後にコピー

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
ログイン後にコピー

function f() { return new.target; } console.log((new f()) === f); //true
ログイン後にコピー