クロージャについて

ボタンをクリックすると、そのボタンが何番目かを表示する。

var add_the_handlers = function(nodes) {
	var i;
	for (i = 0; i < nodes.length; i++) {
		nodes[i].onclick = function(e) {
                     alert(i);
                };
	}
};

これだとボタンの総数を返してしまう。
なぜなら、alert(i)する無名関数は変数iを直接返しているからだ。
関数が作られた時の変数を返しているのではない。

var add_the_handlers = function(nodes) {
	var helper = function(index) {
		return function(e) {
			alert(index);
		};
	};

	var i;
	for (i = 0; i < nodes.length; i++) {
		nodes[i].onclick = helper(i);
	}
};
add_the_handlers(document.getElementsByTagName("button"));

このプログラムは、引数に代入されたindexをalertする無名関数を返す。
indexとiは別物なので、こんどは期待通りの値を表示してくれるはずだ。

ちょっと今回の記事は自信がない。なにか付け足したかったり、間違っていることを見つけた方はTwitterなどで連絡していただきたい。
よろしくお願いします。