ホームページ > 記事 > ウェブフロントエンド > ES6クラスのスーパーキーワードの詳細説明

ES6クラスのスーパーキーワードの詳細説明

小云云オリジナル: 2018-01-04 13:19:265302ブラウズ

この記事は ES6 クラスのスーパーキーワードを集めてまとめたものなので、必要な方は参考にしていただければ幸いです。

以下は単なる個人的な学習メモです:

キーワード super は関数またはオブジェクトとして使用できます。どちらの場合も、その使い方はまったく異なります。

1. 関数として使用します

class A {}
class B extends A {
 constructor() {
  super(); //ES6 要求，子类的构造函数必须执行一次super函数。
 }
}

super は親クラス A のコンストラクターを表しますが、サブクラス B のインスタンスを返すことに注意してください。つまり、この内部の super は B を参照しているため、super( ) は、ここでは A.prototype.constructor.call(this) と同等です。

class A {
 constructor() {
  console.log(new.target.name); //new.target指向当前正在执行的函数
 }
}
class B extends A {
 constructor() {
  super();
 }
}
new A() // A
new B() // B

super() が実行されると、親クラス A のコンストラクターではなく、サブクラス B のコンストラクターを指すことがわかります。つまり、super() 内のこの部分は B を指しています。

2. オブジェクトとして使用します

通常のメソッドでは親クラスのプロトタイプオブジェクトを指しますが、静的メソッドでは親クラスを指します。

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

上記のコードでは、サブクラス B の super.c() がオブジェクトとして super を使用しています。このとき、通常のメソッドでは super は A.prototype を指しているため、super.c() は A.prototype.c() と同等になります。

スーパーを介して親クラスのメソッドを呼び出すと、スーパーはサブクラスのメソッドをバインドします。

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

上記のコードでは、super.s() が A.prototype.s() を呼び出しますが、A.prototype.s() はサブクラス B のこれをバインドするため、出力は 1 ではなく 2 になります。。つまり、実際に実行されるのは super.s.call(this) です。

これはサブクラスにバインドされているため、スーパーを通じてプロパティに値が割り当てられている場合、スーパーは this となり、割り当てられたプロパティはサブクラスインスタンスのプロパティになります。

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
 }
}
let b = new B();

上記のコードでは、super.x に値 3 が割り当てられています。これは、値 3 を this.x に割り当てることと同じです。 super.x を読み込むと A.prototype.x が読み込まれるため、unknown が返されます。

super を使用する場合は、それを関数として使用するかオブジェクトとして使用するかを明示的に指定する必要があることに注意してください。そうしないと、エラーが報告されます。

class A {}
class B extends A {
 constructor() {
  super();
  console.log(super); // 报错
 }
}

上記のコードでは、console.log(super) の super が関数として使用されているかオブジェクトとして使用されているかが確認できないため、JavaScript エンジンはコードを解析するときにエラーを報告します。このとき、スーパーのデータ型を明示できればエラーは報告されません。

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

ES6クラスのスーパーキーワードの詳細説明

関連記事