js闭包为什么可以实现点击li标签弹出对应的索引值，详解（一看就会）

一. 问题描述
1，问题：js实现点击li标签弹出对应的索引值
2，实现代码如下：
3，现象：我们这时还没有点击li标签哦，此时打印看看li标签上的onclick事件绑定的函数分别长什么样子，如下图：

结果：这个时候i值为4，四个函数是一样的，都是console.log(i)
4，接下来的动作就是要点击li标签啦，会执行各自的函数，但是在i值为4的情况下，这个时候点击标签，打印的结果可想而知，都是4.
二：闭包
所以，怎么才能让各自的函数记住各自的i值呢，可以使用闭包，为什么闭包可以记住不同的i值，我们用到的是闭包的一大特性，那就是：闭包函数可以访问它被创建时所处的上下文环境，记住，是闭包被创建时的
三. 解决方案：使用闭包
在下面代码中，每一个li标签的onclick事件赋值了一个立即执行函数，这个立即执行函数传入的参数是i,i被接收后传给num变量，然后再创建一个闭包函数，并且将闭包函数返回给到onclick事件，该函数同上面一样，被绑定在了每个标签的onclick事件上。

这个时候我们仍然还没有执行点击li标签的操作，所以函数只是存放在了那里而已，还没有执行，我们可以先在控制台打印出每个onclick绑定的闭包函数看看是什么样子滴，如下图，可以看到，这次都是打印的num变量。但是，不同之处在于，针对不同的函数，这次的num的值是不同的哦，为什么不同呢，正是由于闭包，在循环给第一个li标签的onclick事件绑定函数时，此时，num是1，然后第一个闭包函数被创建，绑定到了onclick事件上，闭包函数由于可以访问它在被创建时的作用域中的变量，所以记住的就是1，在给第二个li标签的onclick事件绑定函数时，num是2，闭包函数记住的就是2，以此类推。

接下来点击li标签，此时，执行闭包函数，由于闭包在执行时访问的num是它在被创建时的作用域中的当时的num，闭包声明时各个num不同，所以记住的就不同啦，打印的也都不相同。