クラスの継承 (extends を利用したクラス継承) - JavaScript
JavaScriptのクラスの継承について紹介します。
概要
JavaScriptのclassでもクラスの継承が利用できます。クラスを継承する場合には extends を利用します。
書式
class (クラス名) extends (継承元クラス){
...(クラスの実装)
}
プログラム例
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
constructor(quote) {
this.iquote = quote;
}
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
}
class MyClassEX extends MyClass {
constructor(quote, count) {
super(quote);
this.icount = count;
}
method01() {
var qq="";
for (var i = 0; i < this.icount; i++) {
qq = qq + this.iquote;
}
return qq + "Hello JavaScript Class." + qq;
}
}
function onButtonClick() {
var mclass = new MyClassEX("～",3);
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr />
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>
解説
基底のクラスの実装コードが下記になります。処理のロジックは
こちらの記事で紹介している、コンストラクタに与えた文字列を保持し、method01()メソッドの戻り値で、"Hello JavaScript Class." の前後にコンストラクタに与えた文字列を追加して返す処理になります。
class MyClass {
constructor(quote) {
this.iquote = quote;
}
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
}
MyClass を継承した MyClassExクラスの実装コードが下記になります。constructorの引数は2つになり、第二引数は第一引数を何個追加するかを指定する引数になります。
method01() メソッドでは、コンストラクタの第二引数の回数分だけ、第一引数の文字列を連結し、"Hello JavaScript Class." の前後に文字列を追加します。
class MyClassEX extends MyClass {
constructor(quote, count) {
super(quote);
this.icount = count;
}
method01() {
var qq="";
for (var i = 0; i < this.icount; i++) {
qq = qq + this.iquote;
}
return qq + "Hello JavaScript Class." + qq;
}
}
constructor(quote, count) {
super(quote);
this.icount = count;
}
上記コードの super() により、基底クラスのコンストラクタが呼び出されます。quote のメンバ変数 this.iquote への代入は基底クラスのコンストラクタで実行されます。継承クラスではコンストラクタの第二引数 count をthis.icontメンバ変数に代入する処理をします。
function onButtonClick() {
var mclass = new MyClassEX("～",3);
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
ボタンをクリックされた際に実行されるコードが上記の onButtonClick()関数になります。
var mclass = new MyClassEX("～",3);
にて、MyClassEXクラスのインスタンスを作成します。コンストラクタの第一引数には、method01 の戻り値の前後に追加する文字列を与えます。第二引数には、第一引数の文字列を何個追加するかの数値を与えます。
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Execボタンをクリックします。"output" と表示されていた場所の文字列が、"～～～Hello JavaScript Class.～～～" の表示に変わります。クラスの継承や継承クラスの実装が動作していることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
