主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

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

最終更新日 2012-09-23 08:30:27 (1年以上前の記事です)

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 を渡している。
この方法だと見た目もすっきりしていいかなと思う。

最終更新日 2012-09-23 08:30:27

コメント このエントリーをはてなブックマークに追加

フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank1, rank2, rank3, rank7, rank9, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google