Javascript: prototypeを使用した関数の継承

プログラミング
スポンサーリンク




こんにちは、おみです。

今回は、javascriptでprototypeを使用して関数を継承させる方法について、解説していきたいと思います。

 

スポンサーリンク

継承とは

オブジェクト指向の概念の一つで、親クラスの性質を引き継いだ子クラスを作るための仕組みのことです。

既存クラスの性質を引き継ぐということで、例えば

  • 各クラスに共通する変数や処理を親クラスに記述し、子クラスに引き継いで利用することでコード量の削減ができる
  • 共通の処理や変数を修正する場合親クラスのみを修正すればいいため、リファクタリング等が容易になる

といった利点があります。

 

Javascriptで継承をするには

Javascriptはオブジェクト指向言語の側面を持っているためクラスの継承を行えるほか、prototypeを使用することで関数の継承も行うことができます。

 

prototypeとは…

  1. オブジェクトに存在するプロパティの一つ
  2. 型はObject またはNull
  3. 関数(=function)もオブジェクトであるため、prototypeを持つことができる
  4. オブジェクト内に指定した変数が存在しない場合、prototypeを伝って親の方へ遡って変数検索を行う

 

4がミソですね

指定した変数がない場合親に遡って変数を検索するという処理は、クラスの継承と似ているところがあります。

ちなみにこのprototypeを使用した変数の検索方法をプロトタイプチェーンと呼びます。

 

ソースコード

実際にprototypeを使用した関数の継承を行なってみましょう.

// 関数Humanを作成
var Human = function(){};

// Humanのprototypeを指定
Human.prototype = {
  name: "人間",
  speak: function() {
    console.log(this.name);
  }
};

// こっちでも大丈夫
// Human.prototype.name = "人間";
// Human.prototype.speak = function() { 
//   console.log("こんにちは");
// }

// 関数Karinを作成
var Karin = function(){
  this.name = "藤吉夏鈴"
}

// HumanのprototypeをKarinのprototypeに継承
Karin.prototype = Human.prototype;

// 関数Karinをインスタンス化して変数karin生成
var karin = new Karin();

// karin.speakを実行
karin.speak();

// 関数Kiraを作成
var Kira = function(){
  this.name = "増本綺良";
}

// HumanのprototypeをKiraのprototypeに継承
Kira.prototype = Human.prototype;

// 関数Kiraをインスタンス化して変数kira生成
var kira = new Kira();

// kira.speakを実行
kira.speak();

 

ポイント

オブジェクトのプロトタイプを生成するには、下記のいずれかを使用します。

(例) オブジェクトHumanのprototypeにnameを生成する場合

// マップで指定する
Human.prototype = {
  name: "人間",
};

// 変数で指定する
Human.prototype.name = "人間";

 

どちらの場合も、呼び出し方は同じです。

var human = new Human()
console.log(human.name);

 

prototypeの継承を行う場合は、”子オブジェクト.prototype = 親オブジェクト.prototype”と記述します。

Karin.prototype = Human.prototype;
Kira.prototype = Human.prototype;

 

 

 

 

タイトルとURLをコピーしました