<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <script> var btns=document.querySelectorAll("button"); //i的值等於btns.length for(var i=0;i<btns.length;i++){ btns[i].onclick=function () { console.log(i); } } //取出每個i的值的方法 //方法一：自定義屬性 for(var i=0;i<btns.length;i++){ btns[i].index=i; btns[i].onclick=function () { console.log(this.index); } } //方法二：閉包，自執行函數傳參i for(var i=0;i<btns.length;i++){ (function (i) { btns[i].onclick=function () { console.log(i); } })(i) } //方法三：es6，let聲明變量 for(let i=0;i<btns.length;i++){ btns[i].onclick=function () { console.log(i); } } //思考：let聲明，循環語句之內是一個父作用域，在循環體之中是一個子作用域，彼此分離 for(let i=0;i<btns.length;i++){ let i=10; console.log(i); } console.log(i); </script> </body> </html>
ES6的思考，控制台結果如下圖：
