SSブログ
[JavaSctipt]オブジェクト指向..｜[雑記]ドローン（DJI Mini 3） ブログトップ

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

[はじめに]
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
タグ：オブジェクト指向 JavaScript 継承
2023-11-03 19:45  nice!(0)  コメント(0) 
共通テーマ：パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前：[必須]
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

[JavaSctipt]オブジェクト指向..｜[雑記]ドローン（DJI Mini 3） ブログトップ

Digital Watch


So-netブログ

So-net無料ブログ作成

ブログ紹介

koalatch_icon.jpg
こあらっちの日記

LicenseLogo

【MCP上位資格】
MCTS(Microsoft Certified Technology Specialist)
MCTS：(Technology Specialist)
・For DynamicsAX2012(2013.2取得）
・For SharePoint2010(2012.10取得）
・For SQLServer2008(2012.8取得）
・For DynamicsAX2009(2011.6取得）
・For .NET2.0 WebApp(2011.5取得）
・For .NET2.0 WinApp(2009.2取得）

MCSD(Microsoft Certified Solution Developer)
MCSD：(Solution Developer)
・For Microsoft.NET(2006.6取得）
・For VisualStudio6.0(2001.9取得）

MCAD(Microsoft Application Developer)
MCAD：(Application Developer)
・For Microsoft VB.NET(2003.4取得）
・For Microsoft C#.NET(2003.4取得）

MCDBA(Microsoft Certified DataBase Administrator)
MCDBA：(DB Administrator)
・For SQLServer7.0 (2001.12取得）

【MCP】（24科目取得）
MCP(Microsoft Certified Professional)
【開発系】
・70-483
　C#でのプログラミング
・70-528
　Webアプリ開発(.NET2.0)
・70-526
　Windowsアプリ開発(.NET2.0)
・70-536
　アプリケーション開発基礎(.NET2.0)
・70-300
　ソリューションアーキテクチャ(VS.NET)
・70-310
　XMLWebService開発(VB.NET)
・70-320
　XMLWebService開発(C#.NET)
・70-305
　Webアプリ開発(VB.NET)
・70-315
　Webアプリ開発(C#.NET)
・70-306
　Windowsアプリ開発(VB.NET)
・70-316
　Windowsアプリ開発(C#.NET)
・70-100
　ソリューションアーキテクチャ（VS6）
・70-176
　デスクトップアプリ開発(VB6)
・70-175
　分散アプリ開発(VB6)
【データベース系】
・70-433
　データベース開発(SQLServer2008)
・70-432
　実装とメンテナンス(SQLServer2008)
・70-229
　DBデザインと実装(SQLServer2000)
・70-028
　DBデ管理(SQLServer7.0)
・70-029
　DBデザインと実装(SQLServer7.0)
【インフラ系】
・70-210
　Windows2000Professional
・70-215
　Windows2000Server
【その他】
・70-573
　SharePoint2010アプリ開発
・MB6-872
　DynamicsAX2012のｲﾝｽﾄｰﾙ
・MB6-822
　DynamicsAX2009の生産

【Oracle認定資格(Java)】
（3科目取得）
JavaSE8_Gold.jpg
・1Z0-809
　Java Gold SE 8 (2019.7取得)

JavaSE8_Silver.jpg
・1Z0-808
　Java Silver SE 8 (2018.7取得)

JavaSE7_8_Bronze.jpg
・1Z0-814
　Java Bronze SE 7/8 (2017.8取得)

【LPIC認定上位資格】
・LPICレベル１(2021.2取得)
【LPIC認定資格】
・LPIC-1 101：LPICレベル１ 101(2021.2取得)
・LPIC-1 102：LPICレベル１ 102(2021.1取得)

【情報処理】
・第1種情報処理技術者(2000.4取得)
・第2種情報処理技術者(1998.4取得)

【その他IT】
・AWS認定Solutions Architect Associate Level(2014.8取得)

【その他】
・アマチュア無線 電話級(1987.8取得)

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。