es6 での super の使用法は何ですか

super の使用法: 1. super を関数として使用する場合、親クラスのコンストラクターを表すために使用されます。構文は "constructor(){super();}" です。 super はオブジェクトとして使用され、通常のメソッドで使用され、親クラスのプロトタイプ オブジェクトを指すために使用され、静的メソッドで親クラスを指すために使用されます。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 での super の使用法は何ですか

最初のケース: super が関数として使用される場合、親クラスのコンストラクターを表します

ES6 要件、サブクラスのコンストラクターはスーパー関数を 1 回実行する必要があります

class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数，必须执行一次super函数，代表父类的构造函数
  }
}

注: スーパーは親クラスのコンストラクターを表しますが、このときに返されるインスタンスは B のインスタンスです。 super 内の this は B のインスタンスを参照するため、 super() は A.prototype.constructor.call(this)

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

と同等になります。上記のコードでは、 new.target は現在実行中の関数を指します。 super() が実行されると、親クラス A のコンストラクターではなく、子クラス B のコンストラクターを指します。 つまり、super() 内のこれは B

を指します。 super が関数として使用される場合、サブクラスのコンストラクターに出現する必要があります。そうでない場合、エラーが報告されます。

class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}

2 番目のケース: super がオブジェクトとして使用される場合、通常のメソッドでは、それは次のプロトタイプ オブジェクトを指します。親クラスを指し、静的メソッドでは親クラスを指します

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();

上記のコードで、super が関数として使用されている場合、親クラスの構築メソッドを表します。オブジェクトとしては、親クラスのプロトタイプ オブジェクト、つまり A.prototype を指すため、super.p() は A.prototype.p()

ここでも注意する必要があります。 super は親クラスのプロトタイプを指しているため、親クラス インスタンスのプロパティやメソッドは super

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

を通じて呼び出すことはできません。上記のコードでは、p は親クラス A です。インスタンスの属性は呼び出すことができません。 super.p

属性が親クラスのプロトタイプで定義されている場合、super

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

を使用してアクセスできます。上記のコードでは、属性 x はプロトタイプで定義されています親クラスのオブジェクトにアクセスするには、super.x を使用します。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がes6 での super の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。