jQueryにてAjaxのコールバックにオブジェクト内の関数を割り当てる。

何かしらのAjaxの処理が完了した際、その場で無名関数をゴリゴリ記述しても動作に問題はないが、どうしても可読性と美しさに欠ける。
そんなときにお勧めなのがこの書き方である。

まずはオブジェクトを宣言し、内部にコールバックで実行したい関数を定義する。

var myFuncs = {};
myFuncs.callback = function(data){
    // 処理
}

今度は同オブジェクト内にAjaxの処理を追加。
そしてコールバック関数のdone()内を以下のように記述する。

myFuncs.ajax = function(){
	$.ajax({
		url: url,
		type: 'POST',
		data: data
	}).done((function(obj){return function(d){obj.callback(d)}})(this));
}

こうすることでオブジェクトmyFuncs内のcallback()関数をAjax完了後の処理として割り当ててることが出来る。
この挙動を説明するためには、Javascriptにおけるthisが何を指しているのかを理解する必要がある。
分かり易いよう、done()のみを取り出すと以下のようになる。

done(
		(function(obj){
			return function(d){
				obj.callback(d)
			}
		})(this)
	);

done()直後のfunction()はこのエントリ←で紹介した文法を用いて関数を記述したもの。
流れとしてはまず、戻り値として関数自体を返却する関数にthis(この場合オブジェクトmyFuncsを指す)を渡し変数objとして受け取る。
次に、Ajaxからの返り値を「d」として受けとり、obj内のcallback()関数にその「d」を渡す関数を記述し、その関数自体を返却(return)する。
こうすることでthisのスコープを上手いこと持ちまわしつつコールバック関数を割り当てる事が出来るので、ソースがめちゃくちゃ綺麗になる。

最初はなかなかピンと来ないが、理解してしまえばかなり便利。