什么是JS闭包？

JS闭包是一个难点也是JS的特色，是JS的高级特性。首先我们知道JS运行函数的时候会在内存中开辟一个存储空间，会把函数体内的代码当作字符串一摸一样的放在这个空间中， 把这个空间地址赋值给函数名(变量名)，当我们调用函数的时候会根据地址找到这个储存空间，然后执行储存空间里的代码会在内存中开辟一个函数执行空间，在这个执行空间里面进行形参赋值，执行完毕以后,因为JS的垃圾回收机制 这个函数执行空间会被垃圾回收机制回收,但是在函数内部返回一个函数。然后在外部有变量接收这个函数。那么这个函数的执行空间就不会被回收，也就形成了闭包。

JS垃圾回收机制

• JS分为堆内存和栈内存
• 栈内存只能存放基本数据类型
• 堆内存中开辟空间存放复杂数据类型，然后把引用地址赋值给变量
• 如果一个数据存放在堆内存开辟的空间中，栈内存中没有变量引用这个数据的地址，那么这个数据就会被垃圾回收机制给回收，释放内存。

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

优点：

1. 延长了变量的生命周期，因为执行空间不销毁, 变量也没有销毁
2. 可以访问函数内部的私有变量
3. 保护私有变量(只要是函数, 就有这个特点)

缺点：

因为当一段内存空间中有一个不会被销毁的东西一直存在那么就会出现内存占用, 如果过多, 就会导致内存溢出，从而导致内存泄漏

闭包的生成有三个必要条件(缺一不可)

1. 在函数 A 内部直接或者间接返回一个函数 B
2. 把函数体内的代码当作字符串一摸一样的放在这个空间中
3. 把这个空间地址赋值给函数名(变量名)

深入了解闭包

• 闭包是我们函数的一种高级使用方式
• 在聊闭包之前我们要先回顾一下 函数

函数的两个阶段

• 我们一直说函数有两个阶段
  1. 定义阶段
  2. 调用阶段

函数定义阶段

1. 开辟一个 存储空间
2. 把函数体内的代码一模一样的放在这个空间内（不解析变量）
3. 把 存储空间 的地址给函数名

函数调用阶段

1. 按照函数名的地址找到函数的 存储空间
2. 形参赋值
3. 预解析
4. 将函数 存储空间 中的代码拿出来执行（才解析变量）

重新定义函数调用阶段

1. 按照函数名的地址找到函数的 存储空间

2. 形参赋值

3. 预解析

4. 在内存中开辟一个 执行空间

5. 将函数 存储空间 中的代码拿出来在刚刚开辟的 执行空间 中执行

6. 执行完毕后，内存中开辟的 执行空间 销毁

   function a() {
     console.log('我是 fn 函数')
   }
   
   a() 
   

   • 函数执行的时候会开辟一个 执行空间 （我们暂且叫它 xxff00）
   • console.log('我是 fn 函数') 这个代码就是在 xxff00 这个空间中执行
   • 代码执行完毕以后，这个 xxff00 空间就销毁了

函数执行空间

• 每一个函数会有一个 存储空间
• 但是每一次调用都会生成一个完全不一样的 执行空间
• 并且 执行空间 会在函数执行完毕后就销毁了，但是 存储空间 不会
• 那么这个函数空间执行完毕就销毁了，还有什么意义呢？
  • 我们可以有一些办法让这个空间 不销毁
  • 闭包，就是要利用这个 不销毁的执行空间

函数执行空间不销毁

• 函数的 执行空间 会在函数执行完毕之后销毁

• 但是，一旦函数内部返回了一个 引用数据类型，并且 在函数外部有变量接受 的情况下

• 那么这个函数 执行空间 就不会销毁了

  function fn() {
    const obj = {
        name: '小明',
        age: 18,
        gender: '男'
    }
    
    return obj
  }
  
  const o = fn()
  

  • 函数执行的时候，会生成一个函数 执行空间 （暂且叫它 xxff00）
  • 代码在 xxff00 空间中执行
  • 在 xxff00 这个空间中声名了一个 对象空间（xxff11）
  • 在 xxff00 这个执行空间把 xxff11 这个对象地址返回了
  • 函数外部 0 接受的是一个对象的地址没错
    • 但是是一个在 xxff00 函数执行空间中的 xxff11 对象地址
    • 因为 o 变量一直在和这个对象地址关联着，所以 xxff00 这个空间一直不会销毁
  • 等到什么时候，执行一句代码 o = null
    • 此时， o 变量比在关联在 xxff00 函数执行空间中的 xxff11 对象地址
    • 那么，这个时候函数执行空间 xxff00 就销毁了

不销毁的空间

• 闭包的第一个条件就是利用了不销毁空间的逻辑

• 只不过不是返回一个 对象数据类型

• 而是返回一个 函数数据类型

  function fn() {
      
    return function () {}
  }
  
  const f = fn()
  

  • f 变量接受的就是一个 fn的执行空间 中的 函数

内部函数引用外部函数中的变量

• 涉及到两个函数

• 内部函数要查看或者使用着外部函数的变量

  function fn() {
    const num = 100
    
    // 这个函数给一个名字，方便写笔记
    return function a() {
      console.log(num)
    }
  }
  
  const f = fn()
  

  • fn() 的时候会生成一个 xxff00 的执行空间
  • 再 xxff00 这个执行空间内部，定义了一个 a 函数的 存储空间 xxff11
  • 全局 f 变量接受的就是 xxff00 里面的 xxff11
  • 所以 xxff00 就是不会销毁的空间
  • 因为 xxff00 不会销毁，所以，定义再里面的变量 num 也不会销毁
  • 将来 f() 的时候，就能访问到 num 变量

小结：

以上只是笔者个人日常积累总结，如果有误请指正，定会虚心接受