何かしらのAjaxの処理が完了した際、その場で無名関数をゴリゴリ記述しても動作に問題はないが、どうしても可読性と美しさに欠ける。
そんなときにお勧めなのがこの書き方である。
まずはオブジェクトを宣言し、内部にコールバックで実行したい関数を定義する。
1 2 3 4 | var myFuncs = {};
myFuncs.callback = function (data){
}
|
今度は同オブジェクト内にAjaxの処理を追加。
そしてコールバック関数のdone()内を以下のように記述する。
1 2 3 4 5 6 7 | 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()のみを取り出すと以下のようになる。
1 2 3 4 5 6 7 | done(
( function (obj){
return function (d){
obj.callback(d)
}
})( this )
);
|
done()直後のfunction()はこのエントリ←で紹介した文法を用いて関数を記述したもの。
流れとしてはまず、戻り値として関数自体を返却する関数にthis(この場合オブジェクトmyFuncsを指す)を渡し変数objとして受け取る。
次に、Ajaxからの返り値を「d」として受けとり、obj内のcallback()関数にその「d」を渡す関数を記述し、その関数自体を返却(return)する。
こうすることでthisのスコープを上手いこと持ちまわしつつコールバック関数を割り当てる事が出来るので、ソースがめちゃくちゃ綺麗になる。
最初はなかなかピンと来ないが、理解してしまえばかなり便利。