JavaScriptでクラスを扱う件についてのメモ

他言語では普通に使っているクラス、というかオブジェクト指向的なプログラミングですが、今までJavaScriptではあまり使っていませんでした。

で、最近ほぼ初めてオブジェクト指向的にJavaScriptでのプログラミングをしたので、忘れないうちにメモ書き。

超基本的で、恥ずかしいくらいですが、自分のため。

基本はfunction

JavaScriptでは、クラスと言ってもfunction。

他言語でするような

class SampleClass {

	public int x;
	private double y;

	SampleClass () {

		コンストラクタのコード

	}

	

}

というような宣言はしません。(ちなみに上記はC#を想定しました。)

以下のような宣言になります。

function SampleClass() {
	this.x = 0;
	this.y = 0;

	this.Construct();

	

}

SampleClass.prototype.Construct = function() {

	コンストラクタのコード

}

1行目の宣言部分は

var SampleClass = function() {

などとしてもOK。厳密には意味は違いますが、ほぼ同じように使えます。

関数リテラルとかオブジェクトリテラルなどという用語も関係してきますが、その説明は今回は割愛。。。

インスタンスメソッドはprototypeで

インスタンスメソッドは、上記コードの「SampleClass.prototype.Construct」の部分で設定します。

他言語と比べると、クラスのブロックの中に無いのが少し気持ち悪いですが、JavaScriptはこういうものです。

複数のメソッドを追加する場合には、以下のようなコードも可能。

SampleClass.prototype = {
	Construct: function() {

		コンストラクタのコード

	}

	TestFunction: function() {

		このメソッドのコード

	}
}

いわゆる連想配列の形式ですが、まさにそれです。JavaScriptのクラスは連想配列をイメージするのが理解は早そうです。

ちなみに、この宣言方法の場合、以下のように「SampleClass.prototype = {」を複数記述しようとすると、先に記述されているメソッドは後のものに上書きされて使えなくなるので要注意。

SampleClass.prototype = {
	Construct: function() { ← これは無効

		コンストラクタのコード

	}

	TestFunction: function() { ← これも無効

		このメソッドのコード

	}
}

SampleClass.prototype = {
	Construct2: function() { ← これだけ有効

		コンストラクタのコード

	}
}

クラスに限らずJavaScript全体に言えることですが、他言語に比べて記法がいくつかあるのが柔軟かつ難解ですね。

書き切れないので、またいずれ。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます