クラス継承
クラス継承を作成するには、extendsキーワードを使用します。
クラス継承で作成されたクラスは、別のクラスからすべてのメソッドを継承します。
例
「Car」クラスからメソッドを継承する「Model」という名前のクラスを作成します。
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
自分で試してみる»
super()は親クラスを参照します。
コンストラクターメソッドでメソッドを呼び出すことでsuper()、親のコンストラクターメソッドを呼び出し、親のプロパティとメソッドにアクセスできます。
継承はコードの再利用に役立ちます。新しいクラスを作成するときに既存のクラスのプロパティとメソッドを再利用します。
ゲッターとセッター
クラスでは、ゲッターとセッターを使用することもできます。
特に値を返す前、または設定する前に値に対して特別な処理を行いたい場合は、プロパティにゲッターとセッターを使用するのが賢明です。
クラスにゲッターとセッターを追加するには、getとsetキーワードを使用します。
例
「carname」プロパティのゲッターとセッターを作成します。
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
自分で試してみる»
注:ゲッターがメソッドであっても、プロパティ値を取得する場合は括弧を使用しません。
この場合、ゲッター/セッターメソッドの名前をプロパティの名前と同じにすることはできません。carname.
多くのプログラマは、ゲッター/セッターと実際プロパティを区別するために、プロパティ名の前にアンダースコア文字を使用します。
例
アンダースコア文字を使用して、getter/setter を実際のプロパティから分離できます。
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
自分で試してみる »
*セッター*を使用するには、プロパティ値を設定するときと同じ構文をかっこなしで使用します。
例
セッターを使用して、carname を「Volvo」に変更します。
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
自分で試してみる»
巻き上げ
関数やその他のJavaScript 宣言とは異なり、クラス宣言は巻き上げられません。
つまり、使用する前にクラスを宣言する必要があります。
例
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford")
自分で試してみる»
注: 関数などの他の宣言については、JavaScript 宣言のデフォルトの動作が巻き上げ (宣言を先頭に移動する) であるため、宣言される前に使用しようとしてもエラーは発生しません。
