JavaScriptクラスの継承
クラス継承
クラス継承を作成するには、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()、親のコンストラクターメソッドを呼び出し、親のプロパティとメソッドにアクセスします。
継承は、コードの再利用に役立ちます。新しいクラスを作成するときに、既存のクラスのプロパティとメソッドを再利用します。
ゲッターとセッター
クラスでは、ゲッターとセッターを使用することもできます。
プロパティにゲッターとセッターを使用するのは賢明です。特に、値を返す前、または設定する前に、値を使って特別なことをしたい場合はそうです。
クラスにゲッターとセッターを追加するには、
getandsetキーワードを使用します。
例
「carname」プロパティのゲッターとセッターを作成します。
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
注：ゲッターがメソッドであっても、プロパティ値を取得する場合は括弧を使用しないでください。
この場合、getter / setterメソッドの名前をプロパティの名前と同じにすることはできませんcarname。
多くのプログラマーは_
、プロパティ名の前にアンダースコア文字を使用して、ゲッター/セッターを実際のプロパティから分離します。
例
アンダースコア文字を使用して、ゲッター/セッターを実際のプロパティから分離できます。
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
セッターを使用するには、プロパティ値を設定するときと同じ構文を括弧なしで使用します。
例
セッターを使用して、車名を「ボルボ」に変更します。
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
巻き上げ
関数や他のJavaScript宣言とは異なり、クラス宣言は引き上げられません。
つまり、クラスを使用する前に、クラスを宣言する必要があります。
例
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
注：関数などの他の宣言の場合、JavaScript宣言のデフォルトの動作が引き上げられている（宣言を一番上に移動している）ため、宣言する前に使用しようとしてもエラーは発生しません。