了解闭包

了解闭包

• 闭包的生成有三个必要条件(缺一不可)
  1. 在函数 A 内部直接或者间接返回一个函数 B
  2. B 函数内部使用着 A 函数的私有变量(私有数据)
  3. A 函数外部有一个变量接受着函数 B
  => 形成了一个不会销毁的函数空间
  简单来说就是： 闭包 => 函数内部的函数

function a() {
      // 这个 num 变量就是函数 a 的私有变量
      var num = 100

      return function b() {
        console.log(num)
      }
    }

    // res 接受的是 a 函数执行以后的返回值
    // res 接受的就是函数 a 内部返回的一个复杂数据类型(函数b)
    //   导致函数 a 的执行空间不会销毁
    var res = a()

    // 从现在开始, res 随时可以是一个 函数a 里面返回的 函数b
    //   res 随时可以调用
    res()
    // 当 res 调用的时候, 打印 num
    //   打印出来的就是 a 函数内部的私有变量 num 的值

什么又是不会被销毁的函数空间？

+ 函数定义阶段
      1. 在内存中开辟一个存储空间
      2. 把函数体内的代码当作字符串一摸一样的放在这个空间中
        => 碰到的所有变量都不进行解析
      3. 把这个空间地址赋值给函数名(变量名)
    + 函数调用阶段
      1. 按照函数名(变量名)找到对应的存储空间
      2. 从新开辟一个函数 **执行空间**
      3. 在这个执行空间里面进行形参赋值
      4. 在这个执行空间里面进行预解析
      5. 把函数存储空间的代码复制一份到执行空间里面执行一遍
      6. 执行完毕之后, 这个开辟出来的执行 **空间销毁**

在一个特殊的情况下

    + 函数的执行空间是不会被销毁的
  什么是特殊的情况
    + 当函数内部返回一个 **复杂数据类型**
    + 并且在函数外部有变量接受这个 **复杂数据类型** 的时候
    + 这个时候函数的执行空间不会被销毁
  这个不会销毁的函数执行空间
    + 什么时候会销毁
    + 当外部接受的这个变量不在引用函数内部的返回值的时候
    + 这个函数空间就销毁了

比如：

function fn(i){
    return function(n){
        console.log(n + (--i))
    }
}

var f = fn(2)
f(3)
fn(4)(5) 
fn(6)(7) 
f(8) 

闭包的特点(优点和缺点并存)

    1. 延长了变量的生命周期
      + 优点: 因为执行空间不销毁, 变量也没有销毁
      + 缺点: 因为执行空间不销毁, 会一直存在在内存中
    2. 可以访问函数内部的私有变量
      + 优点: 利用闭包函数可以访问函数内部的私有变量
      + 缺点: 执行空间不会销毁, 会一直存在在内存中
    3. 保护私有变量(只要是函数, 就有这个特点)
      + 优点: 保护私有变量不被外界访问
      + 缺点: 如果向访问, 必须要利用闭包函数
  闭包的函数的缺点 **致命**
    + 因为当一段内存空间中有一个不会被销毁的东西一直存在
    + 那么就会出现内存占用, 如果过多, 就会导致内存溢出
    + 那么结果就是 内存泄漏（就会不别人利用进行攻击网站）

闭包的作用

    + 就是当你需要延长变量的声明周期的时候
    + 或者你需要访问某一个函数内部的私有数据的时候
    + 你可以使用 闭包 函数来解决
    + 前提:
      => 如果有别的方法, 尽量不要使用闭包函数
      => 只有到没有招的时候, 我们在使用闭包函数

闭包: 慎用

应用闭包函数案例

  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>

  <script>
    /*
      循环绑定事件
        + 获取所有 button 按钮
        + for 循环绑定好一个点击事件
        + 需求: 点击的时候打印出对应的索引
    */

    var btns = document.querySelectorAll('button')
 function loop(num) {
      // 这个函数第一次执行的时候 i === 0
      // 这个函数第而次执行的时候 i === 1
      btns[num].onclick = function () {
        console.log(num)
      }

    }
 for (var i = 0; i < btns.length; i++) {
      loop(i)
    }

家中逆战，无畏疫情！！！