クラスを作成する

prototype.jsを使わない場合のクラスの作成方法

このページでは、prototype.jsを使ったクラスの作成方法について書いてありますが、 まずはprototype.jsを使わないで定義する方法から見て下さい。
いかにprototype.jsが必要かがわかると思います。

JavaScriptは、元々クラスという概念ではなくて、オブジェクトという概念をサポートしています。
Javaや、それを参考にして作られたオブジェクト思考のプログラミング言語では、まずクラスを作成して、 そこからそのインスタンス(個々の実態)を作成するのが一般的ですが、 JavaScriptでは、いきなりインスタンスのようなものを作成してしまうのです。

var MyObject = new Object();
MyClass.myMethod = function() {
	alert('myMethod');
}

MyObject.myMethod();

このプログラムはまずMyObjectというものを作成して、そこに後付けでmyMethodというメソッドを加えています。 そして次に後付けしたメソッドを呼び出しています。
つまり、JavaScriptは、メソッドや変数を後付けできるということになります。

1つのクラスから複数のインスタンスが作成されるように、JavaScriptでも、1つのオブジェクトから複数のオブジェクトを作成することができます。

// コンストラクタ定義
MyObject = function(message) {
	this.message = message;
}

// 雛形メソッド定義
MyObject.prototype.myMethod1 = function() {
	alert('myMethod1 : ' + this.message);
}

// 雛形メソッド定義
MyObject.prototype.myMethod2 = function() {
	alert('myMethod2 : ' + this.message);
}

// 雛形から新しくオブジェクトを作成
var myInstance = new MyObject('maiu-');
myInstance.myMethod1();

なんとも見た目がややこしいですね。
コンストラクタは関数で、prototype(雛形)は関数の中身に記述するだなんて。

JavaScriptは、見た目の見づらさを解決するために、JSON形式でメソッドを記述できるようになっています。

// コンストラクタ定義
MyObject = function(message) {
	this.message = message;
}

// 雛形メソッド定義
MyObject.prototype = {

	myMethod1 : function() {
		alert('myMethod1 : ' + this.message);
	},
	
	myMethod2 : function() {
		alert('myMethod2 : ' + this.message);
	}
}

// 雛形から新しくオブジェクトを作成
var myInstance = new MyObject('maiu-');
myInstance.myMethod1();

JSON形式で記述すると、他のオブジェクト指向言語のような、クラスの中のスコープにメソッドが囲まれた、 馴染み深い見た目になりますが、 これでもやはり、コンストラクタ定義がなんかおかしいとか、継承をする時はどうすればいいのといった問題が残っています。

prototype.jsを使ったクラスの作成方法

JavaScriptの機能のみを使ってのオブジェクト指向プログラミングだと、どうしてもソースがごちゃごちゃになりがちです。 (というか、JavaScript初心者には、この部分が他の言語と比べて特異すぎて訳が分からなくなってしまします。)

そこで、prototype.jsでは、JavaScriptのクラス宣言を、もっと簡単にできるようにClassというオブジェクトを用意しています。
これを使うことで、次に示すように、他の言語と似たような感じでクラス定義することが可能になります。

Class.create([継承元,] JSON形式でのクラス定義)

var MyClass = Class.create({
	
	// コンストラクタ定義
	initialize: function(myMessage) {
		this.myMessage = myMessage;
	},
	
	// メソッド定義
	myMethod1: function() {
		alert('myMethod1 : ' + this.myMessage);
	},
	
	myMethod2: function() {
		alert('myMethod2 : ' + this.myMessage);
	}

});


var myClsInst = new MyClass('まいうー');
myClsInst.myMethod2();

initializeという名前のメソッドは特別な意味を持ち、コンストラクタとみなされます。
その他のメソッドも、JSON形式で記述することができます。
ソースの見た目は、かなり他のオブジェクト指向言語のクラス宣言に似てきて、 直感的な定義も可能になっています。よね？

prototype.jsを使ったクラスの継承

JavaScriptにはそもそもクラスという概念は存在しないのですが、しいていえば、オブジェクトがオブジェクトを継承することはできます。
JavaScriptのみでオブジェクトを継承する場合、継承元のオブジェクトのプロパティやメソッドをすべてプログラマ側が新しいオブジェクトにコピーすることで行います。

しかしprototype.jsを使えば、そんな作業なんてナシでめちゃ簡単にクラスを継承することができるようになります。

var MyClass = Class.create({
	
	// コンストラクタ定義
	initialize: function(myMessage) {
		this.myMessage = myMessage;
	},
	
	// メソッド定義
	myMethod1: function() {
		alert('myMethod1 : ' + this.myMessage);
	},
	
	myMethod2: function() {
		alert('myMethod2 : ' + this.myMessage);
	}

});

var MySubClass = Class.create(MyClass, {

	myMethod3: function() {
		alert('myMethod3 : ' + this.myMessage);
	}

});

var mySubClsInst = new MySubClass('うまいー');
mySubClsInst.myMethod3();
mySubClsInst.myMethod2();

継承のしかたは簡単、Class.create()メソッドの第一引数を継承元のクラスにするだけです。
そして第二引数にクラス定義のJSONを記述します。
結果はちゃんとmyMethod3()もmyMethod2も呼び出されています。

他のオブジェクト指向ならばコンストラクタだけはクラスごとに定義しなければなりませんが、 prototype.jsのクラスの概念では、コンストラクタもメソッドとして認識しているみたいなので、 コンストラクタまでも継承されています。