当我们利用for循环绑定单击响应函数时，如下例：console.log(i)永远输出都是4。而不是我们想要的点击第一个输出0，点击第二个输出1
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var li=document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick=function(){
console.log(i)
}
}
</script>
之前我听到过一个说法，说是当浏览器加载js完成时，for循环就会执行完毕，这时在for循环中输出的i是for循环完成的结果。在for循环外面输出的i则为li.length。所以我们用下面的方法来解决该问题。
若我们要输出相应的 i 时，我们可以给 li[i] 增加一个 index 属性，如下：
<script type="text/javascript">
var li=document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].index=i;
li[i].onclick=function(){
console.log(this.index)
}
}
</script>
这样 index 就可以等于相应的 i 的值。
然而在我再次复习js作用域和let时。发现了更进一步的说法。
当for循环中对于变量i使用 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。当循环体内绑定单击响应函数，输出的i是li.length-1，当点击事件发生时，i 首先会去块级作用域去找，当找不到时就会去全局作用域中去找。此时 i 做为全局变量，i的值为i循环后在for循环内限制的结果，为li.length-1。
当for循环中对于变量 i 使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。这时候当for循环中的点击事件发生时，i 会先去块级作用域中寻找，在块级作用域中找到相应的值后，就不会去全局作用域中去找。此时，输出的i的值为点击函数对应的值。
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var li=document.getElementsByTagName("li");
for (let i = 0; i < li.length; i++) {
li[i].onclick=function(){
console.log(i)
}
}
</script>
这样就可以了
