クロージャの実行結果

Question

http://qiita.com/5t111111/items/9a8bdac862820910131fの解説で、

function buildList(list) {
var result = [];
for (var i = 0; i < list.length; i++) {
var item = 'item' + list[i];
result.push( function() {alert(item + ' ' + list[i])} );
}
return result;
}

function testList() {
var fnlist = buildList([1,2,3]);
for (var j = 0; j < fnlist.length; j++) {
fnlistj;
}
}

の結果が"item3 undefined" と3回表示ですが、item変数を参照しているタイミングはreturn resultされた後という認識でよろしいのでしょうか。そうであれば、item1,item2,・・とalertさせたいときは、無名関数は使えないということでしょうか。

Answer 1

そうですね、参照しているタイミングはreturn resultされた後、testList()内でfnlistj;と無名関数が実行されたタイミングになります。

ですから無名関数が呼ばれた時点で変数itemには"item3"、iはループを抜けたあとなので3が入っていることになります。またlist[3]は配列の範囲外なのでundefinedになります。
結果、3回とも"item3 undefined"とアラートされるわけですね。

itemやiが変更されるのを防ぐには、無名関数を使って状態を保持しておくという手があります

function buildList(list) { 
    var result = []; 
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + list[i];
        (function (item, i) {
            result.push( function() {alert(item + ' ' + list[i])} ); 
        })(item, i);
    } 
    return result; 
}

JavaScriptクロージャ入門でも言われている通りクロージャは関数呼び出し毎に生成なので、
無名関数内のitem, iは呼び出し元のitem, iが変化しても変わることはありません。