for循环中变量i值的理解

<ul id="ul1">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
</ul>

<script>

window.onload = function () {
　　var app = document.getElementsByClassName('li');

　　// for循环变量输出
　　// for (var i = 0; i < app.length; i++) {
　　// // 在for循环里绑定的事件要等循环结束后才会执行
　　// app[i].onclick = function () {
　　// console.log(i)
　　// };
　　// }
　　// // 第一个循环这里点击输出的都是4

　　// // 第一个for循环拆解后就是下面这个for循环
　　// for (var i = 0; i < app.length; i++) {
　　// var ss = function () {
　　// console.log(i)
　　// };
// }
　　// // 在for循环运行结束后再执行点击事件，调用ss函数，此时变量i的值当然是4
　　// app[0].onclick = ss
　　// app[1].onclick = ss
　　// app[2].onclick = ss
　　// app[3].onclick = ss

 

　　// 解决方法
for (var i = 0; i < app.length; i++) {
　　// 使用自调用的匿名函数内嵌一个闭包，可以完美解决for循环变量传值的问题
　　(function(n){
　　　　app[i].onclick=function(){
　　　　　　console.log(n)
　　　　}
　　})(i)
　　}
}

</script>