javascript-js 回調函數的一個疑惑

js 回調函數的一個疑惑

$(document).ready(function(){ for(var i = 0 ; i < 5; i++){ $("#b"+i).bind("click",function(){ alert(i); }); } });

This is a paragraph.

請點擊這裡0
請點擊這裡1
請點擊這裡2
請點擊這裡3
請點擊這裡4

代碼如上，很簡單的一個循環。但是為什麼這5個button點擊後都是alert出5呢
為什麼不是0,1,2,3,4呢？難道是回調的執行順序的問題？求大神解答

最佳回答：

@wuheng_1 正解
這是閉包法則帶來的結果。

$(document).ready(
    function(){ 
            //形成閉包
            for(var i = 0 ; i < 5; i++){
                //在這裡定義了變量i
                $("#b"+i).bind("click",function(){
                        //內部函數調用了變量i
                        alert(i); 
                    });
            }
            //假如在這裡繼續改變i的值，那麼你會發現alert的值繼續發生改變
        });
//問題的關鍵在於內部方法使用了外部方法的變量i

就這個問題而言，當然是有解決辦法的，思路1，放棄id選擇器，把id當成一個屬性，然後利用startWith過濾器選擇到這些東西，然後each枚舉通過解析id的具體值來完成事件的綁定。
思路2，定義一個返回值為function的js方法，然後把i作為參數傳進去。然後在綁定中調用此方法獲取綁定事件的具體執行方法（可能說的不是很清楚，直接函數片段）

//思路一
$("*[id^='b']).each(function(index, data){
    var i = $(data).id().substring(1);
    $(data).bind("click", function(){alert(i);});
});
 //思路二
 function(){ 
            var getFun = function(canshu){return alert(canshu);};
            for(var i = 0 ; i < 5; i++){
                $("#b"+i).bind("click", getFun(i));
            }
        });