JavaScriptのclassとclassもどきのメモ

JavaScriptにおけるES6のclassで少し面倒な事が起きてES5のclass（functionを用いたclassっぽいもの）を使った方がスマートに解決できる気がするのでメモしておく。

class(CHoge)の中にclass(CFuga)

class CHoge{
	CFuga = class{
		constructor( num ){
			this.num = num;
		}
	}
	constructor(){
		this.fuga = new this.CFuga( 0 );
	}
}

これはOK。

class(CHoge)の中のclass(CPiyo)にclass(CHoge)の中のclass(CFuga)

class CHoge{
	CFuga = class{
		constructor( num ){
			this.num = num;
		}
	}
	CPiyo = class{
		constructor(){
			this.fuga = new this.CFuga( 0 );
		}
	}
	constructor(){
		this.fuga = new this.CFuga( 0 );
		this.piyo = new this.CPiyo();
	}
}

Uncaught TypeError: this.CFuga is not a constructor
そりゃそうだよね、CPiyoから見てCFugaは持ってないのでthis付けられても困るよね。

thisをはずしても

CPiyo = class{
	constructor(){
		this.fuga = new CFuga( 0 );
	}
}

Uncaught ReferenceError: CFuga is not defined
CPiyoから見てCFugaなんて知らねーよ。となる。

解決法

外に出す

class CFuga{
	constructor( num ){
		this.num = num;
	}
}
class CPiyo{
	constructor(){
		this.fuga = new CFuga( 0 );
	}
}
class CHoge{
	constructor(){
		this.fuga = new CFuga( 0 );
		this.piyo = new CPiyo();
	}
}

これが手っ取り早い、でもそのclass(CHoge)でしか使わないならその中に収めたい…

staticにする

class CHoge{
	static CFuga = class{
		constructor( num ){
			this.num = num;
		}
	}
	CPiyo = class{
		constructor(){
			this.fuga = new CHoge.CFuga( 0 );
		}
	}
	constructor(){
		this.fuga = new CHoge.CFuga( 0 );
		this.piyo = new this.CPiyo();
	}
}

なんか、気持ち悪い。

class CHoge{
	static CFuga = class{
		constructor( num ){
			this.num = num;
		}
	}
	static CPiyo = class{
		constructor(){
			this.fuga = new CHoge.CFuga( 0 );
		}
	}
	constructor(){
		this.fuga = new CHoge.CFuga( 0 );
		this.piyo = new CHoge.CPiyo();
	}
}

CPiyoもstaticにして揃えたとしても気持ち悪い。
これなら外に出した方がまだましな気がする。

この場合、CHogeはclassなんてやめてES5のclassもどきのfunctionにした方がいいのではなかろうか。

let Hoge = function(){
	class CFuga{
		constructor( num ){
			this.num = num;
		}
	}
	class CPiyo{
		constructor(){
			this.fuga = new CFuga( 0 );
		}
	}
	this.fuga = new CFuga( 0 );
	this.piyo = new CPiyo();
}

気持ちいい～

ゲームのタイトル画面とかはclassよりfunctionの方が作りやすいなという結論に至りました。