特集PC技術

コアJavaScript(ECMAScript)の図書室

 

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

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

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

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

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

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

// スーパークラス2のメソッド
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クラスを参照します。

[5] 更新履歴

日付 詳細
2011/09/16 コンテンツ公開

コメントの投稿


画像の中に見える文字を入力してください。

トラックバックURL

http://www.isl.ne.jp/cgi-bin/mt/mt-tb.cgi/1712

サイト内検索

コアJavaScript(ECMAScript)の図書室

twitterTwitter

最新ブログ記事

2015年06月13日

JavaScriptの情報室

4冊目 ハイブリッドアプリが作れる。tabris.js

2014年10月16日

C++言語学習録

第3回 ファイルを分割してみよう

2014年10月09日

C++言語学習録

第2回 オブジェクト指向の復習

2014年10月02日

C++言語学習録

第1回 C++の開発環境を整える

2014年09月25日

Swiftを試してみようなう。

第4回 Swiftでクラスを使うなう。

ISL 情報戦略研究所

pagetopこのページの先頭へ戻る