クロージャ関連の挙動について

var a=[100, 200, 300];
var b=[];
var i;
for(i=0; i <= 2; i++){
  b[i] = function(){ alert(a[i]); } /* 想定しない挙動 */
}

/* ※1 */
var j;
for(j=0; j <= 2; j++){
  b[j]();
}

/* ※2 */
for(i=0; i <= 2; i++){
  b[i]();
}

↑を実行すると「undefined」が3回(ここまで※1)、次いで「100」「200」「300」と(ここまで※2)ポップアップされる。
さらに

b[0]();
i=1;
b[0]();

を実行すると「undefined」「200」とポップアップされる。
うーん…
ちなみに↓のように直すとうまくいく。

var a=[100, 200, 300];
var b=[];
var i;
for(i=0; i <= 2; i++){
  b[i] = (function(x){
    return function(){ alert(a[x]); };
  })(i); /* 想定したとおりの挙動 */
}
/* ※3 */
var j;
for(j=0; j <= 2; j++){
  b[j]();
}

/* ※4 */
for(i=0; i <= 2; i++){
  b[i]();
}

/* ※5 */
b[0]();
i=1;
b[0]();

このときは
「100」「200」「300」(ここまで※3)「100」「200」「300」(ここまで※4)「100」「100」(ここまで※5)
の順にポップアップされる。