JS闭包理解案例

闭包的主要作用就是延伸了变量的作用范围,但是也可能会导致内存泄漏

先写一个案例

function fn(){
  let num = 10;
  function fun(){
    console.log(num)
  }
  fun()
}
fn()

打印结果为10，fun()里面调用了外面函数的变量num

那我们在最外面可以调用num这个变量嘛，试试

function fn(){
  let num = 10;
  function fun(){
    console.log(num)
  }
  return fun
}
let f = fn()
f()

这样写我们fn外面的作用域可以访问fn内部的局部变量

我们实现点击li输出当前li的索引号

1.我们可以利用动态添加属性的方式
 <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>

  var lis = document.querySelector('ul').querySelectorAll('li')
  for(var i =0;i<lis.length;i++){
    lis[i].index = i;
    lis[i].onclick =function(){
      console.log(this.index)
    }
  }

   // 2.；利用闭包的方式得到当前小li的索引号
  for(var i=0;i<lis.length;i++){
    //利用for循环创建了4个立即执行函数
    //立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
    (function(i){
      lis[i].onclick =function(){
        console.log(i)
      }
    })(i);
  }