【Javascript】クラスの書き方メモ【イベントハンドラ】

JSのクラスの書き方
忘れがちなので書いておきます

◆基本形

function MyClass( honyahonya ){
	this.initialize.apply(this,arguments);
}

MyClass.prototype={
	initialize:function(message) {
		this.message = message;
	},
	speak:function(){
		console.log( this.message );
	}
}

var myClass = new MyClass("こんにちは");
myClass.speak();

◆イベントをからませた時

function MyClass( honyahonya ){
	var mySelf = this;
	
	this.__speak = function() {
		mySelf.speak(this);
	}
	
	this.initialize.apply(this,arguments);
}

MyClass.prototype={
	initialize:function(message) {
		this.message = message;
		
		$("input[name='speakButton']").click( this.__speak );
	},
	speak:function(e){
		console.log( this.message );
		this.speak2();
	},
	speak2:function(){
		alert( this.message );
	},
}

イベント実行時、 this はclass自身を指さなくなり、
実行されたその要素（input[name='speakButton']"）になります。

thisを使うためには、このように少し特殊な書き方になるのです。

この書き方の場合
speakのthisはクラス自身になり、イベントを発火させた要素は e に格納されています