闭包理解及应用场景

使用闭包的目的是为了设计私有的变量和方法

• 优点：保护函数内部的变量安全，避免污染

• 缺点：闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

  一、闭包是什么？

  在js中，函数即闭包，函数才会产生作用域的概念。而理解作用域就要先明白什么是变量作用域，变量作用域分为两种：全局变量、局部变量。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。所以可以这么理解闭包：1.能够读取其他函数内部变量的函数2.或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用

• 二、闭包的理解

  来几个例子：

  function f1(){
      var name = 'xiaoming'
      function f2(){
          console.log(name)
      }
      return f2
  }
  
  var f3 = f1() // f3的值就是return后的结果，即f2函数
  f3(); // xiaoming f3()就相当于f2()
  f3(); // xiaoming 同上，而且变量name没有销毁，一直存在内存中，供函数f2调用
  f3(); //xiaoming  还是不变

  实现数字自增

• function fn(){
      let n = 10
      add(){
         n++
         console.log(n)   
      }
      return add
  }
  
  let num = fn()
  
  num() //11 实际就是调用add(),这样的话每次调用不用经过n的初始值，达到自增效果
  num() //12
  num() //13

  三、使用场景

• 1. 返回值（最常用如上面两个例子）

  function fn(){
      var name="hello"
      return function(){
          return name
      }
  }
  var fnc = fn()
  console.log(fnc())//hello

  2. 循环赋值

  //每秒执行1次，分别输出1-10
  for(var i=1;i<=10;i++){
      (function(j){
          //j来接收
          setTimeout(function(){
              console.log(j)
          },j*1000)
      })(i)//i作为实参传入
  }

  3. 迭代器（执行一次函数往下取一个值）

  let arr =['a','b','c','d']
  function func(arr){
      let i=0;
      return function(){
          //这个函数每次被执行都返回数组arr中 i下标对应的元素
           return arr[i++] || '数组值已经遍历完'
      }
  }
  var next = func(arr);
  console.log(next());//a
  console.log(next());//b
  console.log(next());//c
  console.log(next());//d
  console.log(next());//数组值已经遍历完

• ---