連載：Microsoft AJAX Library＆JavaScriptプログラミング 第1回　Microsoft AJAX Libraryで実践オブジェクト指向JavaScript 山田 祥寛（http://www.wings.msn.to/） 2007/10/16
Page1 Page2 Page3 Page4

MS AJAX Libによるさまざまなオブジェクト指向構文

　以上、MS AJAX Libで最低限のクラス（コンストラクタやメソッド、プロパティ）を定義する方法と、これをインスタンス化する方法が理解できたと思う。ここからは、さらにオブジェクト指向プログラミングに欠かせない「継承」や「実装（とインターフェイス）」などの手続きについて見ていく。

■MS AJAX Libによる「継承」

　別稿「JavaScriptでオブジェクト指向プログラミング」では、プロトタイプ・ベースのオブジェクト指向における継承機構として、「プロトタイプ・チェーン」を取り上げた。

　プロトタイプ・チェーンは、クラス・ベースのオブジェクト指向とは異なり、動的なメンバの増減にも柔軟に対応できる（つまり、後付けで追加されたメンバも認識できる）という意味で、極めて優れた継承の仕組みではある。しかし同時に、クラス・ベースのオブジェクト指向に慣れた身には、このプロトタイプ・チェーンという概念はなかなか分かりにくいのも事実だ。プロトタイプそのものの概念までは、比較的スムーズに理解できたが、プロトタイプ・チェーンだけはいまいちしっくりとこない、という読者も多かったのではないだろうか。

　そこでMS AJAX Libでは、より直感的に理解しやすい継承の仕組みを提供している。以下のリスト5は、Animalクラスを継承してHamsterクラスを定義する例を示したものだ。

// Wings名前空間の定義 Type.registerNamespace("Wings"); // Wings.Animalクラスの定義（コンストラクタ） Wings.Animal = function() {}; // Wings.Animalクラスの定義（walkメソッド） Wings.Animal.prototype = {   walk : function() {     window.alert("トコトコ");   } }; // Wings.Animalクラスの登録 Wings.Animal.registerClass("Wings.Animal"); // Wings.Hamsterクラスの定義（コンストラクタ） Wings.Hamster = function() {   Wings.Hamster.initializeBase(this); }; // Wings.Hamsterクラスの定義（gnawメソッド） Wings.Hamster.prototype = {   gnaw : function() {     window.alert("ガジガジ…");   } }; // Wings.Hamsterクラスの定義と、Wings.Animalクラスの継承 Wings.Hamster.registerClass("Wings.Hamster", Wings.Animal);

リスト5 Animalクラスを継承するHamsterクラス

　MS AJAX Libの継承機構を利用するといっても、何ら難しいことはない。定義に際して理解しておかなければならない構文は、実にリスト5内の太字部分――2点だけだ。

［リスト5− ］initializeBaseメソッドで基底クラスのコンストラクタを実行

　継承機構を利用する場合には、派生クラスのコンストラクタでinitializeBaseメソッドを呼び出す必要がある。initializeBaseメソッドは、基底クラスのコンストラクタを実行するとともに、継承によるメンバの解決（内部的にはメンバのコピー）を行う。initializeBaseメソッドの一般的な構文は、以下のとおりだ。

initializeBase(呼び出し元のインスタンス [, 引数])

　呼び出し元のインスタンスには、一般的には現在のインスタンスを表すthisキーワードを指定すればよい。基底クラスのコンストラクタが引数を要求する場合には、第2引数でこれを配列として渡すことが可能だ。

　例えば、基底クラスのコンストラクタがname、sexという引数を要求する場合、initializeBaseメソッドは以下のように記述できる。

Wings.Hamster = function(name, sex) {   Wings.Hamster.initializeBase(this, [name, sex]); };

　ちなみに、ブランケット（[〜]）はJavaScriptでは配列リテラルを表すためのものである。

［リスト5− ］registerClassメソッドで継承関係を宣言

　実際の継承関係を表すのは、先ほども登場したregisterClassメソッドの役割だ。リスト5の のように、registerClassメソッドの第2引数に継承元のクラスを指定すればよい。これによって、（ここでは）Wings.HamsterクラスがWings.Animalクラスを継承していることが宣言されることになる。

■MS AJAX Libによる継承とプロトタイプ・チェーンの違い

　以上が、MS AJAX Libにおける継承の手続きだ。もちろん、いわゆるVisual BasicやC#のように言語仕様に組み込まれた機能ではないので、記法自体は独特である。しかし、プロトタイプ・チェーンを利用することに比べれば、はるかに直感的な記述ができることがお分かりになるだろう。また、コードを眺めるときにも、継承関係が宣言的に明示されているので分かりやすい。

　もっとも、簡易であるがゆえに注意しなければならない点もある。

　以下は、基底クラスであるWings.Animalに対して動的にメンバを追加した場合のコードを、プロトタイプ・チェーンを利用して記述したものだ。

// Wings.Animalクラスを定義（メンバはwalkメソッドのみ） var Animal = function() {} Animal.prototype = {   walk : function() {     window.alert("トコトコ");   } }; // Wings.Hamsterクラスを定義 // （プロトタイプとしてAnimalオブジェクトをセット） var Hamster = function() {}; Hamster.prototype = new Animal(); // Wings.Hamsterクラスのプロトタイプに、gnawメソッドを追加 Hamster.prototype.gnaw = function() {   window.alert("ガジガジ…"); }; var ham = new Hamster(); ham.walk(); // 「トコトコ」 ham.gnaw(); // 「ガジガジ…」 // 基底クラスであるWings.Animalに対してrunメソッドを追加 Animal.prototype.run = function() {   window.alert("スタタタ…"); }; ham.run(); // 「スタタタ…」

リスト6 プロトタイプ・チェーンによる継承の例

　プロトタイプ・チェーンにおいては、あくまで暗黙的な参照を通じて、基底クラスのメンバが参照される。従って、リスト6の例のように、派生クラスをインスタンス化した後に基底クラスにメンバを追加した場合でも、これを正しく呼び出すことができる。

　一方、MS AJAX Libによる継承を利用した同様の例を見てみよう。

// 名前空間Wingsを宣言 Type.registerNamespace("Wings"); // Wings.Animalクラスを定義（メンバはwalkメソッドのみ） Wings.Animal = function() {}; Wings.Animal.prototype = {   walk : function() {     window.alert("トコトコ");   } }; Wings.Animal.registerClass("Wings.Animal"); // Wings.Animalクラスを継承したWings.Hamsterクラスを定義 // （追加メンバはgnawメソッド） Wings.Hamster = function() {     Wings.Hamster.initializeBase(this); }; Wings.Hamster.prototype = {   gnaw : function() {     window.alert("ガジガジ…");   } }; Wings.Hamster.registerClass("Wings.Hamster", Wings.Animal); var ham = new Wings.Hamster(); ham.walk(); // 「トコトコ」 ham.gnaw(); // 「ガジガジ…」 // 基底クラスであるWings.Animalに対してrunメソッドを追加 Wings.Animal.prototype.run = function() {   window.alert("スタタタ…"); }; ham.run(); // ？？？

リスト7 MS AJAX Libによる継承の例

　リスト7の の結果はどうなるだろう。実はここでエラーとなり、Internet Explorerを使用している場合にはメッセージとして「オブジェクトでサポートされていないプロパティまたはメソッドです。」と表示される。

　これは、MS AJAX Libによる継承が（メソッドの呼び出し時ではなく）インスタンス化のタイミングで解決されていることによる挙動の違いである。MS AJAX Libでは、インスタンス化のタイミングで基底クラスのメンバをコピーすることで、継承関係を解決している。このため、このようにインスタンス化を行った後の動的なメンバの追加を認識することはできない。

　このような挙動の違いは、むしろプロトタイプ・チェーンを理解している人間にとって混乱のもとになる可能性があるので、きちんと理解しておいてほしいところだ（逆に、Visual Basic／C#のような継承機構に慣れた人間にとっては、ほとんど意識する必要がない違いかもしれない）。

INDEX
	Microsoft AJAX Library＆JavaScriptプログラミング
	第1回　Microsoft AJAX Libraryで実践オブジェクト指向JavaScript
	1．Microsoft AJAX Libraryの導入と構造
	2．スクリプト・コアによるクラス定義の基本
	3．MS AJAX Libによるさまざまなオブジェクト指向構文
	4．インターフェイスの定義と実装／［コラム］Typeクラスの実体

　

「Microsoft AJAX Library＆JavaScriptプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）