何かしらの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のスコープを上手いこと持ちまわしつつコールバック関数を割り当てる事が出来るので、ソースがめちゃくちゃ綺麗になる。
最初はなかなかピンと来ないが、理解してしまえばかなり便利。