prototype.jsを使ってクラスを継承

「prototype.jsでオブジェクト指向」で述べたとおり、クラスの継承とは、「車が一台あって、タイヤだけ違う車をコピーで作る、みたいな感じです。更に、元の車になかったMDコンポなどを追加、といった感じに機能追加も簡単です。」ということでした。

prototype.jsで継承をしてみる bookmark

ではその、一部分だけ違うもの、というのを作ってみましょう。

<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> var Person = Class.create(); Person.prototype = { initialize : function(name) { this.name = name; }, kick : function() { document.writeln(this.name+'の蹴りじゃぁあ!<br>'); }, punch: function() { document.writeln(this.name+'のパンチじゃぁあ!'); } }; var Man = Class.create(); // Person継承クラス(Man)の作成 Man.prototype = Object.extend(new Person, { initialize : function(name, message) { this.name = name; this.message = message; }, kick : function() { Person.prototype.kick.apply(this); // 親クラスの関数呼び出し document.writeln('男、'+this.name+'の蹴りじゃぁあ!<br>'); }, tikarakobu : function() { document.write('これが男の力こぶじゃぁあ<br>'); } }); var kenji = new Man('kenji'); kenji.kick(); kenji.punch(); </script>

prototype.jsでの継承の解説 bookmark

Personを作り変えて、Manというクラスを作ってみました。
継承を行うには、次のように行います。

子クラス.prototype = Object.extend(new 親クラス, 子クラスの定義);

オブジェクト指向では、継承される側を親、継承する方を子として扱います。
「子クラスの定義」部分で、initialize、kick、tikarakobu というメソッドを定義しています。initialize、kick は親クラスである Person にも存在しましたので、ここでもう一度定義することで、上書きされます。Manクラスのinitialize、kickメソッドが優先されます。子クラスであるManクラスでは、新たなtikarakobuという機能が追加されています。これはPersonにはない機能でした。このように機能を新規に追加することが出来ます。

また、忘れてはいけない部分が、Personクラスのpunchというメソッドです。
Man内では、punch メソッドは定義していないにも関わらず、kenji.punch()は使えます。

これが継承という機能の強力な部分であり、子クラスは親クラスの全機能を使うことができます。更に、上で説明したように上書きすることも出来ます。

上書きしてしまったら親のクラスはどうやって使うの？と思った方は次の行がその答えです。

Person.prototype.kick.apply(this); // 親クラスの関数呼び出し

親クラスのメソッドを呼ぶには次のようにします。

親クラス.prototype.親クラスのメソッド名.apply(this);

なんとなく、継承という機能について分かってもらえたでしょうか？

まとめておくと次のようになります。

• 子クラスは親クラスの全機能をもつ
• 子クラスは親クラスの機能を上書きできる
• 子クラスは親クラスの知らない新機能を追加できる。
• 子クラスは贅沢で、上書きしてしまった親クラスの機能を使うことも出来ます。

次のページでは、抽象クラスについて説明します。

次のページ： 抽象（Abstract）クラスを作成 (JavaScriptでオブジェクト指向)