とあるJavaScriptの情報図書【JavaScript】[ECMAScript] 継承

とあるJavaScriptの情報図書

【JavaScript】[ECMAScript] 継承

今回はJavaScriptのオブジェクト指向のうち継承を解説します。

[1] 継承とは

オブジェクト指向の概念で継承は重要な項目です。
継承とは元になるオブジェクト(スーパークラス)を引き継いで新しいクラス(サブクラス)を作成します。
引き継いだ際にスーパークラスの機能を引き継ぎます。
この継承もJavaのような継承ではなくて、継承のようなものになります。

[2] 継承を試してみる

さっそく、継承のプログラムを見てみることにします。
だいたい下のようなプログラムになると思います。

// スーパークラス(哺乳類)
function Mammal(name){
	this.name = name;
}

// スーパークラスのメソッド(サブクラスでこれを引き継ぐ)
Mammal.prototype.introduce = function(){
	document.writeln("私の名前は" + this.name + "です");
}

// サブクラス(人類)
function Human(name,age){
	// スーパークラスのコンストラクタの呼び出し(重要)
	// このオブジェクトのコンストラクタのように実行する
	// Javaでいうとsuper見たいな役割を果たす
	Mammal.call(this,name);
	this.age = age;
}

// HumanとMammalの関係を表す(重要)
Human.prototype = new Mammal();

// サブクラスのメソッド
Human.prototype.good_morning = function(){
	document.writeln("おはようございます");
}

// 実行してみる
var hopsii = new Human("ほぷしぃ",20);

// Humanが持つメソッド
hopsii.good_morning();

// Mammalが持つメソッド
hopsii.introduce();

Humanのプロトタイプオブジェクトが持つgood_morningが実行できるのは当たり前ですが、
Mammal(スーパークラス)を引き継いだHuman(サブクラス)で、introduceメソッドが実行できます。
では、細かく説明したいところがあります。

継承の関係を表す方法

「Human.prototype = new Mammal();」が継承を表すプログラムになります。
これを記述しておかないとスーパークラスから引き継いだメソッドなどを実行することができません。

callメソッド

callメソッドとは簡単にいうとスーパークラスのコンストラクタを自分のものであるかのようにに呼び出す方法です。
１つ目の引数は自分自身を表すthisキーワードを使用します。必須です。
２つ目以降はスーパークラスに渡す引数を指定します。
callメソッドに似たような機能としてapplyメソッドというのがあります。
callメソッドは引数が値ですが、applyは配列を渡します。

[3] 継承は途中で変更ができる

継承関係を途中で変更することだってできます。
継承関係を変えた場合元の関係は消えてしまうのか見てみます。

// スーパークラス
function Mammal(){
}

// スーパークラスのメソッド
Mammal.prototype.introduce = function(){
	document.writeln("自己紹介をします");
}

// スーパークラス２
function Mammal2(){
}

// スーパークラス２のメソッド
Mammal2.prototype.introduce = function(){
	document.writeln("自己紹介をするよ");
}

// サブクラス(人類)
function Human(){

}

// HumanとMammalの関係を表す
Human.prototype = new Mammal();

var hopsii = new Human();
hopsii.introduce();

// 一度定義した継承関係を変更できる
Human.prototype = new Mammal2();

var pcsp = new Human();

// 継承関係を変えても実行される内容は元の継承関係を持つ
pcsp.introduce();
hopsii.introduce();

インスタンスが生成された時点で、元の継承関係が変更されても変更されない
というちょっと奇妙な現象が確認できる

[4] プロトタイプチェーン

このJavaScriptにおける継承の仕組みを実現しているのがプロトタイプチェーンといいます。
値を参照したときにどのような順番で値を参照しているかが重要になります。
(1)インスタンスのプロパティを参照する
(2)インスタンスを生成したクラスのプロトタイプオブジェクトを参照する
(3)継承元のクラスのプロトタイプオブジェクトを参照する
(4)さらに継承関係があった時はさらに上のクラスのプロトタイプオブジェクトを参照する
このようになっており、最後は最も上位のObjectクラスを参照します。