クロージャとイベントハンドラについて

Question

↓エラーパターン

$(function() {
    var data = [
      {label:'リンク１', value:1},
      {label:'リンク２', value:2},
      {label:'リンク３', value:3},
      {label:'リンク４', value:4},
      {label:'リンク５', value:5}
    ];
    var ul = $('<ul/>');
    for(var i = 0, l = data.length; i < l; i++) {
      var item = data[i];
      var li = $('<li/>').text(item.label).click(function(e) {
        console.log(e.type, item.value);
      });
      ul.append(li);
    }
    $('body').append(ul);
});

↓正しいパターン

$(function() {
    		var data = [
      			{label:'リンク１', value:1},
      			{label:'リンク２', value:2},
      			{label:'リンク３', value:3},
      			{label:'リンク４', value:4},
      			{label:'リンク５', value:5}
    		];
    		var ul = $('<ul/>');
    		for(var i = 0, l = data.length; i < l; i++) {
      			var item = data[i];
      			var li = $('<li/>')
				.text(item.label)
				.click(
					function () {  //エンクロージャ
        					var closureItem = item;
        					return function(e) { //クロージャ
          						console.log(e.type, closureItem.value);
        					};
      					}()
				);
      			ul.append(li);
    		}
    		$('body').append(ul);
	}
);

jQueryで動的にリストを作ってli要素をクリックしたときにコンソールに出力する(例えばリンク1をクリックしたら「click1」と表示する)サンプルで、エラーパターンは、どれをクリックしても「click 5」と表示されてしまう、それに対して正しいパターンはリンク1→click1,リンク2→click2,・・・という風に正しく動作する、というものです。
一応クロージャの基礎は勉強したので、クロージャからclosureItem変数を参照できる、というのはわかるのですが、なぜ正しいパターンなら正しく動くのかがいまいちはっきりしません。
そのサイトの解説では、エラーパターンは「初期処理を終えた時点の変数itemにdata[4]が代入されている、そこでクリックすることになるのでどこをクリックしてもclick5と表示される。」とあり、それはそれで理解できます(つまりくり返し処理後にクリックということ。)ただそれは正しいパターンでも同じなのではないか？よって正しいパターンでも常にclick5が表示されるのではないか？と思ってしまいます。(実際は正しいパターンは正しく動く。)
なぜここでクロージャを使うとリンク1→click1,リンク2→click2,・・・というような結果になるのでしょうか？

Answer 1

ポイントは「エンクロージャ」と名付けられた即時関数の後ろにある"()"です。
これは、関数リテラルによって生成された関数をその場で実行するということです。

「エンクロージャ」はループ時に5回実行されているが、その結果 (＝戻り値) である「クロージャ」はクリック時に実行されるということです。

その結果として現れる最も重要な違いは次の点です。
・エラーパターンでは "item" というループごとに中身が変化する「単一の」変数にアクセスするイベントハンドラーを5回定義している。
・正常パターンでは、名前が同じだが別の変数 "closureItem" を5回定義し、その各々にアクセスするイベントハンドラーを (こちらも5回) 定義している。

クリック時に呼ばれる「クロージャ」という関数は、その同名の closureItem という5つの変数のうち、
自らが宣言された際に外側にあった1つにアクセスしようとします。
そのため、他の4回とは区別された変数として処理されます。

Answer 2

正しいパターンの方のエンクロージャは、イベント発生時ではなくその場で実行されて、そして、関数のローカル変数は実行ごとに別なものになります。

つまり、i=0の時にエンクロージャを実行して生成するclosureItemと、i=1の時に生成するclosureItemは別個な変数となります。