数冊JavaScript本を読んだところ、クラス（もどき）の記述方法が数パターンあるみたいなのでまとめておく。
サンプルとしては前回同様オライリーの「JavaScriptグラフィックス」で用いられているスプライト描画を使わせていただきました。

パターンその１：
関数を用いる方法。「JavaScriptグラフィックス」で推奨されている方法である。

myClass=function(引数){
 that={
  xxx.....
 };
 return that;
}
var インスタンス=myClass(引数）

http://www.oreilly.co.jp/pub/9784873115283/ch02/ex0201.html
パターン１のソースについてはオライリーの書籍と上記URLを参照いただきたい。

パターンその２：
「教科書的」と言われている方法。
クラス風にインスタンスを生成する。

var インスタンス=new MyClass( 引数 )

それではパターン１の関数を用いる方式から。
サンプルの流れは以下の通り
１．htmlでid指定されているエリア

<div id="draw-target"></div>

を取得し、背景画像にcssで幅・高さ・該当画像（スプライトシート：（いくつかの画像が固定ピクセル毎に行と列で描かれているもの）を指定する

	
var DHTMLSprite=function(params){
	var width=params.width;
	var height=params.height;
	var imagesWidth=params.imagesWidth;
	//html記載 id:draw-targetにdivを追加。
	//そのdiv(即ち今追加したdiv)を$element変数に格納する
	var $element=  params.$drawTarget.append('<div/>').find(':last');
	$element.css({
		position:'absolute',
		width:width , 	
		height:height,
		backgroundImage:'url('+params.images+ ')'
	});
	var elemStyle=$element[0].style;//$elementのスタイルシートを格納。

２．スプライトシート中の何番目の画像を使うか指定するメソッドを作る

changeImage:function(index){
	index*=width;
	var vOffset=-mathFloor(index/imagesWidth)*height;//y座標
	var hOffset=-index%imagesWidth; //x座標
	elemStyle.backgroundPosition=hOffset+'px' + ' '+ vOffset +'px';
} ,

３．描画の際の座標を指定するメソッドを作る

darw:function(x , y){
	elemStyle.left=x+'px';
	elemStyle.top=y+'px';
},

生成は以下のとおり関数の受けで行う。

		var sprite1=DHTMLSprite(params);		
		var sprite2=DHTMLSprite(params);

サンプルではスプライトシート１つめ(指定していない場合デフォルト１つめ）の歯車の画像が座標x=64 y=64に、５つめのグラデーション画像がx=352　y=192に、それぞれ描画されている。

		sprite2.changeImage(5);
		sprite1.draw(64 , 64);
		sprite2.draw(352 , 192);

一方、パターン２の教科書的方法は少々ややこしい。DHTMLSpriteクラスを作ってみた。全文記載。

function DHTMLSprite(params){
	this.width=params.width;
	this.height=params.height;
	this.imagesWidth=params.imagesWidth;
	this.$element=params.$drawTarget.append("<div/>").find(":last");
	this.$element.css(
		{
			position:"absolute" , 
			width:this.width , 
			height:this.height,
			backgroundImage:"url("+ params.images + ")"
		}
	)
	this.elemStyle=this.$element[0].style;
	//要素を引数にしたjQueryオブジェクトは
	//DOM要素が配列で格納されている状態なので
	//$('#xxxx')[0]でDOM要素の参照となる。
	this.mathFloor=Math.floor;
 //高速化のためMath.floorのローカル参照を持つ

}
DHTMLSprite.prototype.draw=function(x , y){
	with(this){
		elemStyle.left=x+"px";
		elemStyle.top=y+"px";		
	}

}
DHTMLSprite.prototype.changeImage=function(index){
	with(this){
		index*=width;
		var vOffset=-mathFloor(index/imagesWidth)*height ; 
			//y座標
		var hOffset=-index%imagesWidth ; 
			//x座標
		elemStyle.backgroundPosition
			=hOffset+'px' + " "+vOffset+'px';
	}
}
DHTMLSprite.prototype.show=function(){
	with(this){
		elemStyle.display="block";
	}
}

DHTMLSprite.prototype.hide=function(){
	with(this){
		elemStyle.display="none"
	}
}
DHTMLSprite.prototype.destroy=function(){
	with(this){
		$element.remove();
	}
}

生成は

		var sprite1=new DHTMLSprite(params);		
		var sprite2=new DHTMLSprite(params);

で行う。描画の指定方法は変わらない。
thisが多いためやや汚く見えるが、生成がActionScript風なのでこちらの方が好みではある。次回は継承についてまとめる。