ECMAScript 6 でのクラス継承分析 (例付き)-jsチュートリアル-php.cn

ECMAScript 6 でのクラス継承分析 (例付き)

不言

リリース： 2018-10-25 15:36:53

転載

2096 人が閲覧しました

この記事の内容は、ECMAScript 6 のクラス継承解析に関するものです (例付き)。必要な方は参考にしていただければ幸いです。

クラス継承

クラス継承を見る前に、まずコンストラクターがオブジェクト継承を実装する方法を確認してください

        function F() {
            this.a = 1;
        }
        function Son() {
            F.call(this);
        } 
        function inherit(S, F) {
            S.prototype = Object.create(F.prototype);
            S.prototype.constructor = S;
        }
        inherit(Son, F);
        let son = new Son();

ログイン後にコピー

コンストラクターが何を実装するのか機能:

F インスタンスオブジェクトの属性である F の this 属性を継承します

Son.prototype.__proto__ === F.prototype は年功の継承を実現します

Son.constructor を使用すると、son は自分の先祖を認識し、先祖に戻ることができます。

クラスの継承にも同じことが当てはまります。

extends キーワードと super キーワードとともに使用されます。単純な継承を見てください。

        class A {
            constructor() {
                this.a = 1;
            }
        }
        class B extends A {
            constructor() {
                super();
                this.b = 2;
            }
            m() {

            }
        }
        let b = new B();

ログイン後にコピー

これも実現します。 3 つの基本的な関数

B {a: 1, b: 2}
b.__proto__  == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B

ログイン後にコピー

だと思います。キーワード extends はプロトタイプの継承とコンストラクターの変更を実現します。キーワード super は親クラス this の継承を実現し、super here を実現します。 call(this)

Note

コンストラクターを記述する場合は、その中に super を記述する必要があります。そうしないと、新しいサブクラスインスタンスオブジェクトがエラーを報告します。または、まったく記述しないでください。次に、サブクラスのコンストラクターで this 属性をスーパー

1 の後に記述する必要があります。本質は、最初にサブクラスのインスタンスオブジェクト this を作成することです。次に、親クラスのメソッドを this (Parent.apply(this)) に追加します。 ES6 独自のこのオブジェクトの継承メカニズムは、まず親クラスのコンストラクターを通じて形成され、親クラスと同じインスタンス属性とメソッドを取得してから、処理されてサブクラス独自のインスタンス属性とメソッドが追加されます。スーパーメソッドが呼び出されない場合、サブクラスはこのオブジェクトを取得しません。

        class B extends A {
            constructor() {    //要么都不写，new时默认会自动生成
                super();
                this.b = 2;    //写在super后面
            } 
            m() {

            }
        }

ログイン後にコピー

super のさまざまなポインティングの問題

関数として、super はサブクラスのコンストラクター内にのみ配置でき、

A.prototype.constructor.call(this)# をポイントします。 ##Super はオブジェクトとして使用され、サブクラスの通常のメソッドで呼び出されます。Super は親クラスのプロトタイプであるため、メソッドのみが呼び出されます。プロトタイプチェーンは呼び出すことができますが、親クラスは使用できません。インスタンス

constructor{}

のメソッドと属性は呼び出すことができず、# と規定されています。 ## サブクラスの通常のメソッド内で super 経由で親クラスのメソッドを呼び出す場合、メソッド内で This は現在のサブクラスのインスタンスを指します。 したがって、上記の return this はサブクラスインスタンスオブジェクトを返すことになります。

super がプロパティに属性を割り当てるオブジェクトとして使用される場合

super はこれと等価で、割り当てられた属性は属性になります。サブクラスのインスタンス

        class A {
            constructor() {

                this.a = 1;
            }
            n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            m() {
                return super.n();
            }
        }
        let b = new B();
        b === b.m();

ログイン後にコピー

Super をオブジェクトとして、静的メソッド内で、親クラスの静的メソッドを呼び出すことができる親クラスを指します。これがメソッド内にある場合は、現在のクラスを指します。 subclass

クラスのみがクラスの静的メソッドを呼び出すことができます

class A {
  constructor() {
    this.x = 1;
  }
}

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

let b = new B();

ログイン後にコピー

オブジェクトは常に他のオブジェクトを継承するため、どのオブジェクトでも super キーワードを使用できます。

        class A {
            constructor() {

                this.a = 1;
            }
            static n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            static m() {
                return super.n();
            }
        }
        console.log(A.n() === A)   // true
        console.log(B === B.m());  //true

ログイン後にコピー

クラスのプロトタイプと __proto__

(1) サブクラスの __proto__ 属性はコンストラクターの継承を示し、常に親クラスを指します。

(2) サブクラスのプロトタイプ属性の __proto__ 属性はメソッドの継承を表し、常に親クラスのプロトタイプ属性を指します。

クラスの継承モード

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};
Object.getPrototypeOf(obj).toString = function () {
    return "这里super等于obj.__proto__";
}
console.log(obj.toString());        //MyObject: 这里super等于obj.__proto__

ログイン後にコピー

この実装により、クラスが独自の静的メソッドを呼び出すことができます

es6は元のコンストラクターの継承を実装します

以前は、Array.apply(this)this は Array の内部構造を形成しませんでした。そのため、配列のようなオブジェクトを使用して配列メソッドを参照するときは、代わりに null を使用しました。

es6 はクラスを使用してその継承を実装します。

es6 Getting Started からのコードの抜粋

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

ログイン後にコピー

ES6 では、Object メソッドが new を通じて呼び出されないことが判明したため、その動作が変更されていることに注意してください。 Object() では、ES6 では、Object コンストラクターがパラメーターを無視することが規定されています。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

ログイン後にコピー

受信パラメータは無効になります

以上がECMAScript 6 でのクラス継承分析 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。