javascript のコールバック関数を引数付きで指定するには

javascript で例えば簡単な例で setTimeout() 関数にコールバック関数を引数付きで指定したい例を考えてみる。

var sayHello = function(who) {
	alert('Hi ' + who + '!');
};

setTimeout(sayHello, 3000);

これだと who には何も値が渡らず Hi undefined! となってしまう。
かといって sayHello('Mike') とかやるとそれが実行された結果が渡されて、 setTimeout() 自体動作しない。
グローバルな変数を定義しておくとか解決方法はいくつうかあると思うけど、きれいなやり方を数例メモしておく。

関数定義でラップしてやる

一番簡単なのは、コールバック関数自体を、関数を返すように変更して対応する方法

var sayHello = function(who) {
	return function() {
		alert('Hi ' + who + '!');
	};
};

setTimeout(sayHello('Mike'), 3000);

従来の解決方法だとこれだと思う。でもこの方法はぱっと見ちょっと理解しづらいかもしれない。

関数バインディング（bind()）を使う

最近のブラウザではこれを解消するため(?)に bind() という関数が用意されてる。これを使うと意外とすっきりする。

var sayHello = function(who) {
	alert('Hi ' + who + '!');
};

setTimeout(sayHello.bind(null, 'Mike'), 3000);

bind() の第一引数は object を渡せるけど、今回は使ってないので null を渡している。
この方法だと見た目もすっきりしていいかなと思う。

コメント