苦学楽学塾 ホームページ
最終更新日：2024年12月29日
クラスを作成するとき、そのメソッド、プロパティを全部作るのでは大変なので、JavaScriptでは、継承と呼ばれる手法を用いて、より上位のクラスの機能を引き継ぐようにします。以下の例では、名前を登録するpersonというクラスと、名前、郵便番号、住所、電話番号を登録するaddressの2つのクラスを作り、クラスpersonを拡張したクラスaddressは、クラスpersonの子クラスとします。以下では、この関係を明示するのに、extendsを用いて、class address extends personと記述しています。こうすると、クラスaddressは、クラスpersonのメソッドとプロパティを継承することができます。
また、personのインスタンスを並べる配列personsとaddressのインスタンスを並べる配列addressesを用意し、indexプロパティを設定するために、persons用のカウンタcount1と、addresses用のカウンタcount2を用意します。count1とcount2は、それぞれ、personとaddressのインスタンスを生成するときに1ずつ増え、配列personsとaddressesの添字となります。
クラスpersonのconstructorは、名前が入っているnameを引数として、nameプロパティとindexプロパティに名前と番号を設定し、配列personsにpersonのインスタンス自身を登録します。クラスpersonは、personsの中からインスタンスを探し配列の添字(indexプロパティではなく添字、indexと一致しているはずですが)を返すsearch1というメソッドと、インスタンスのindexプロパティとnameプロパティを表示するshow1というメソッドを持っています。
クラスaddressのconstructorは、名前、郵便番号、住所、電話番号を引数とし、名前については、親クラスのconstructor(super()と記述します、子クラスのconstructorでは、必ず最初にsuper()を呼び出します)にname引数を渡して、nameプロパティを登録します。その後、クラスaddressのpostcodeプロパティ、addressプロパティ、telnoプロパティに、郵便番号、住所、電話番号を設定し、配列addressesにaddressのインスタンス自身を登録します。クラスaddressは、インスタンスを探索するsearch1と、インスタンスの内容を表示するshow1というメソッドを持っています。
親クラスpersonと子クラスaddressでshow1とsearch1のメソッドを共有しているように見えますが、addressのshow1は、personのshow1を上書きしています。addressのsearch1の中では、super.search1()として(メソッドの中では、親クラスのメソッドを使うときは"super."を付けます)親クラスのsearch1メソッドを利用するようになっており、addressのsearch1は配列personsにおける添字と、配列addressesにおける添字の両方を配列で返すようになっています。このようにJavaScriptでは、親クラスのメソッドを上書きすることも、またそのまま利用することもできるようになっています。
継承機能を確認する例を以下に示します。HTML付きのソース・コードはこちら(Google Chromeで表示させて[F12]で開発ツールを起動しソース表示させてください)。 class person {
constructor(name) {
this.name = name;
this.index = count1;
persons.push(this);
count1++;
}
search1() {
var i1 = persons.findIndex((a6) => a6.name === this.name);
return i1;
}
show1() {
comment("person", this.index, this.name);
}
}
class address extends person {
constructor(name, postcode, address, telno) {
super(name);
this.postcode = postcode;
this.address = address;
this.telno = telno;
this.index = count2;
addresses.push(this);
count2++;
}
search1() {
var i2 = super.search1();
var i3 = addresses.findIndex((a7) => a7.name === this.name);
return [i2, i3];
}
show1() {
comment("address", this.index, this.name, "〒" + this.postcode, this.address, this.telno);
}
}
var count1 = 0;
var count2 = 0;
var persons = [];
var addresses = [];
var p1 = new person("青木一郎");
p1.show1();
var a8 = new address("井上花子", "104-0061", "東京都中央区銀座9-12-15", "03-6229-33XX");
a8.show1();
var a9 = new address("上田次郎", "231-0005", "神奈川県横浜市中区本町7-11-5", "045-203-27YY");
a9.show1();
var p2 = new person("江島康子");
p2.show1();
var i4 = p2.search1();
comment("search1(p)", persons[i4].index, persons[i4].name);
var a10 = a9.search1();
comment("search1(a)", persons[a10[0]].index, persons[a10[0]].name, addresses[a10[1]].index, addresses[a10[1]].name);
function comment(...ar1) {
var com1 = "";
for (var arg of ar1) {
var type1 = typeof(arg);
if (com1.length > 0) {
com1 = com1 + ', ';
}
if (type1 == "number") {
com1 = com1 + String(arg);
}
else if (type1 == "boolean") {
if (arg) {
com1 = com1 + "true";
}
else {
com1 = com1+ "false";
}
}
else if (type1 == "object") {
com1 = com1 + 'obj:' + arg.name;
}
else if (type1 == "function") {
com1 = com1 + 'func:' + arg.name;
}
else {
com1 = com1 + arg;
}
}
alert(com1);
}
上記で、comment関数は、引数に並んだデータ(何個あるかわからないので、残余引数...ar1を利用しています)をタイプに合わせて表示します。クラスpersonのshow1も、クラスaddressのshow1も、comment関数を利用しています。
上記では、青木さん、江島さんの名前，井上さんと上田さんの名前と住所を登録して、登録内容を表示し、また、インスタンスの探索の結果を行った表示するようになっています。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。