2023年11月3日金曜日

[JavaSctipt]オブジェクト指向の実装（クラスの継承）

[はじめに]
JavaScriptの規格は、
ECMAScript（エクマスクリプト）で定められています。

JavaScriptは時代と共に進化しており、
最近のブラウザの大半は、
ECMAScriptのバージョンとして、ES6(ES2015)以降を取り入れています。

ES6(ES2015)は、
クラスなど、オブジェクト指向の概念を取り込んでおり、
最近のソースでもクラスの記載が散見されます。
もちろん、クラスの継承も可能です。

備忘録として、
クラスの継承についてのサンプルソースを掲載します。
以下は、
親クラスを「Mammalクラス（哺乳類）」、
子クラスを「Dogクラス（犬）」と「Catクラス（猫）」とした実装例です。
実行結果_オブジェクト指向の継承_クラス図.png
//【クラス定義(Mammal.js)】
class Mammal{

   //変数宣言（Private）
   //※変数名の先頭に「_」を付加することでPrivate指定になります。
   //名前
   #_name = "";

   //コンストラクタ
   constructor(name){
      this.#_name = name;
   }

   //名前
   get name(){
      return this.#_name;
   }

}
[JavaScript]親クラス（Mammal.js）



//【クラス定義(Dog.js)】
//  Mammalクラスを継承
class Dog extends Mammal{

   //コンストラクタ
   constructor(name){
      //注意：
      //親クラスを継承する際、コンストラクタを定義する場合は、
      //必ずsuper（親クラスのコンストラクタ）を呼び出してください。
      //但し、superを呼び出す前に'this' にアクセスすると、
      //エラーになりますのでご注意ください。
      super(name);
   }

   //挨拶をする。
   sayHello(name){
      window.alert(
         "こんにちは。私の名前は" + this.name + "です。");
   }

   //鳴く
   cry(){
      window.alert("ワンワン");
   }

}
[JavaScript]子クラス（Dog.js）



//【クラス定義(Cat.js)】
//  Mammalクラスを継承
class Cat extends Mammal{

   //コンストラクタ
   constructor(name){
      //注意：
      //親クラスを継承する際、コンストラクタを定義する場合は、
      //必ずsuper（親クラスのコンストラクタ）を呼び出してください。
      //但し、superを呼び出す前に'this' にアクセスすると、
      //エラーになりますのでご注意ください。
      super(name);
   }

   //挨拶をする。
   sayHello(name){
      window.alert(
         "こんにちは。私の名前は" + this.name + "です。");
   }

   //鳴く
   cry(){
      window.alert("にゃーにゃー");
   }

}
[JavaScript]子クラス（Cat.js）



<html>
<head>

<script language="javascript" src="./Mammal.js"></script>
<script language="javascript" src="./Dog.js"></script>
<script language="javascript" src="./Cat.js"></script>
<script language="javascript" >

   function dog_access()
   {
      const mammal = new Dog("ポチ");
      mammal.cry();
      mammal.sayHello();
   }

   function cat_access()
   {
      const mammal = new Cat("タマ");
      mammal.cry();
      mammal.sayHello();
   }


</script>
</head>
<body bgcolor="azure">

<input type="button" value="Dogクラスにアクセス" onclick="dog_access();"><br/>
<input type="button" value="Catクラスにアクセス" onclick="cat_access();"><br/>

</body>
</html>
[JavaScript]利用例

[実行結果]
実行結果_オブジェクト指向の継承.png
at 0 件のコメント:
Labels:
登録: 投稿 (Atom)

[雑記]ドローン（DJI Mini 3）

（１）雑記 もともと多趣味の友人 masakazu Drone 氏が、 最近、 ドローン にハマり始めて、 更に、新たな趣味が増えたとのこと。 ドローン を始めてから、 まだ1年も経っていないとのことですが、 旅行先で山や川の景色を 空撮 して、 Youtube ...

  • [雑記]ドローン（DJI Mini 3）
    （１）雑記 もともと多趣味の友人 masakazu Drone 氏が、 最近、 ドローン にハマり始めて、 更に、新たな趣味が増えたとのこと。 ドローン を始めてから、 まだ1年も経っていないとのことですが、 旅行先で山や川の景色を 空撮 して、 Youtube ...
  • [Book's Review (Develop)]Java言語で学ぶデザインパターン入門第３版
    （１）レビュー 　10年以上前からある書籍ですが、昨今のJavaのバージョンに合わせて、 　リニューアルされましたので、改めて紹介いたします。 　GOFが提唱したデザインパターンについて、とてもわかりやすくまとめた１冊です。 　各パターンを章毎にまとめてあり、クラス図・...
  • [SQLServer]sqlcmdコマンドの表示桁数の指定
    （１）はじめに 　 sqlcmd コマンドで、 　SELECTステートメントを実行した時、 　行の折り返しで、結果が見づらくなることがあります。 　 Oracle の LINESIZE に相当する設定が、 　 SQLServer にもないか調べてみました。 　普段...
  • [Hardware's Review]SEIKO CLOCK (セイコークロック) デジタル ウィークリーアラーム
    （１）レビュー 　目覚まし時計の調子が悪くなったので、新たに購入しました。 　指定した時刻にアラームが鳴ってくれさえすればよいので、 　特別な機能は求めていなかったのですが、 　価格の割に便利な機能が搭載されていたので、購入に至りました。 　最近は、スマホにもアラーム...
  • [Algo]和と積から元の２数の算出
    [はじめに] （１） ある２数の和と積から、元の２数を求めるアルゴリズム です。 　　　例えば、『 足して５ 』、『 掛けて６ 』になる２つの数は、 　　　 ２ と ３ になります。 　　　これを解くアルゴリズムとして、 　　　 ２次方程式の解の解法 を利用することがで...
  • [Book's Review (Develop)]ASP.NET MVC 5実践プログラミング
    （１）レビュー 　 ASP.NET は、以下の2種類に大別されます。 　 （１）ASP.NET Web Form 　　　.NET Framework1.0リリース時の頃から導入 　 （２）ASP.NET MVC 　　　.NET Framework4以降に導入 　...
  • [VBA]Excelのシートを並べ替え
    [はじめに] Excelでシートを昇順に並べ替える機会があったので、 備忘録としてサンプルソースを掲載します。 サンプルは昇順ソートですが、引数を変更すると降順にも対応できるようにしています。 [ソース] コードのコピー Optio...
  • [Book's Review (Develop)]独習JavaScript 新版
    （１）レビュー 　JavaScriptは古くからあり、時代と共に進化してきています。 　JavaScriptの独習シリーズは過去にもありましたが、 　最近（2021年）、独習シリーズでJavaScriptの新版が登場しました。 　 クラス 、 反復処理 、 非同期処理 ...
  • [.NET][Edge対応版]プログラムコードの変換（C#、VB.NET→HTML）
    [はじめに] 　・プログラムソース（C#、VB.NET）を 　　ブログ公開用のHTMLに変換するツールです。 　　（コード量が膨大の為、変換処理のみ掲載しています。） [機能] 　　プログラムソースの文字列を、HTMLに変換する。 　　変換後のHTMLは、<ta...
  • [Tool's Review]ステンレスものほし台 ブロー台付き BD-50S 【ブロー台付きで安定性抜群・U型の竿受けで竿の取り外し楽々! 】
    （１）レビュー 　最近、引越しをしました。 　ベランダの物干し竿を固定する位置が転居前よりも高く、 　身長が低い妻にとって家事がしづらいので、 　 物干し台 を購入しました。 　 　組み立て式の為、多少のぐらつきはありますが、 　実際使ってみても全く不便さを感じませ...