PHPとかだとよくやってしまいそうなミス。
var obj = {"my":"banana","favorite":"apple","fruit":"orange",}
上記は、最終引数後のカンマを取り除き忘れた際の例。
ブラウザによってはこれが原因でエラーになり処理が中断されるので注意が必要。
例えばjQueryでAjax処理を記述する際。
$.ajax({
url : url,
type : 'POST',
data : data,
})
$.ajax()関数に渡しているオブジェクトに注目。
この場合も同様、最終引数後のカンマが原因となり通信が中断されてしまう可能性がある。
Chromeなどのモダンブラウザは適切に解釈してくれるが、IEは当然のごとくコケるのでくれぐれも注意されたし。
何かしらの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のスコープを上手いこと持ちまわしつつコールバック関数を割り当てる事が出来るので、ソースがめちゃくちゃ綺麗になる。
最初はなかなかピンと来ないが、理解してしまえばかなり便利。