js中的闭包

我们先来了解几个概念：
变量作用域：
变量作用域两种：全局变量、局部变量。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。
作用域链：
当代码在一个环境中执行，会创建变量对象的一个作用域链。子对象会一级一级向上寻找所有父对象的变量，反之不行。
立即执行函数：
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法；

闭包概念
闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

看一个例子：

html部分：
<ul>
    <li>click me1</li>
    <li>click me2</li>
    <li>click me3</li>
    <li>click me4</li>
  </ul>
  
js部分：
 var elements = document.getElementsByTagName('li');
  var length = elements.length;
  for (var i = 0; i < length; i++) {
    elements[i].onclick = function() {
        console.log(i)
    }
  }

js代码中的匿名函数没有变量 i，所以它必须向上查找，在全局环境中找到了 i。
当for循环运行后，全局变量中的 i 变成了4。此时当你点击li的时候，会调用其绑定的函数，而该函数运行的时候，发现自己没有 i，就会取得全局环境中的 i。
所以，最后的结果是不管你点击哪一个li，打印的结果都是4。

不是我想要的效果，尝试使用立即执行函数，代码如下：

for (var i = 0; i < length; i++) {
    elements[i].onclick = function(num) {
      return function(){
        console.log(num)
      }
    }(i)
  }

将 i 作为参数传给立即执行函数，这样 i 的值就传给了立即执行函数的局部变量 num ；return的匿名函数就能找到需要的正确变量值了。
这种方法就能实现了我们想要的结果，点击每个li 都能弹出对应的index

对于闭包这部分本人理解的不是特别好，大家可以去看看：学习js闭包