1、以下代碼的功能是要實現為5個input按鈕循環綁定click點擊事件， 綁定完成后點擊1、2、3、4、5五個按鈕分別會alert輸出 0、1、2、3、4五個字符。（騰訊） * 請問如下代碼是否能實現？ * 如果不能實現那么現在的效果是什么樣的？ * 應該做怎樣的修改才能達到我們想要的效果，并說明原理？ ~~~ 1.<div id="btnBox"> 2. <input type="button" value="button_1" /> 3. <input type="button" value="button_2" /> 4. <input type="button" value="button_3" /> 5. <input type="button" value="button_4" /> 6. <input type="button" value="button_5" /> 7.</div> 8. 9.<script type="text/javascript"> 10. var btnBox=document.getElementById('btnBox'), 11. inputs=btnBox.getElementsByTagName('input'); 12. var l=inputs.length; 13. for(var i=0;i<l;i++){ 14. inputs[i].onclick=function(){ 15. alert(i); 16. } 17. } 18.</script> ~~~ ~~~ var btnBox = document.getElementById('btnBox'), inputs = btnBox.getElementsByTagName('input'); /*for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = function () { alert(i); } }*/ /* * 1.為啥不行？ * 事件綁定是“異步編程”，當觸發點擊行為，綁定的方法執行的時候， * 外層循環已經結束；方法執行產生私有作用域，用到變量i， * 不是私有的變量，按照“作用域鏈”的查找機制， * 找到的是全局下的i（此時全局的i已經成為循環最后一次的結果3） * * 2.如何解決? * ->自定義屬性 * ->閉包 * ->ES6 */ /* //=>利用閉包的機制，把后期需要的索引實現存儲到自己的私有作用 中：“閉包有保存作用” for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = (function (i) { return function () { alert(i); } })(i);//=>把每一次循環時候i(全局的)的值傳遞給自執行函數 } */ ~~~  ~~~ //=>ES6和閉包的機制類似，ES6中使用LET創建變量， 會形成塊級作用域，當前案例中， 每一輪循環都會有一個自己的塊級作用域， 把后續需要用到的索引i實現存儲到自己的作用域中 for (let i = 0; i < inputs.length; i++) { inputs[i].onclick = function () { alert(i); } } /*{ let i=0; inputs[0].onclick = function () { alert(i); } } { let i=1; inputs[0].onclick = function () { alert(i); } }*/ ~~~