JavaScript内存管理、垃圾回收机制和闭包

矫情吗；* 2023-10-02 19:53 2阅读 0赞

#### 文章目录 ####

*   *  1.JavaScript内存管理
     *  2.垃圾回收机制算法
     *   *  2.1 垃圾回收机制简介
         *  2.2 常见的GC算法
         *   *  2.2.1 引用计数
             *  2.2.2 标记清除
             *  2.2.3 其他优化补充
     *  3.闭包
     *   *  3.1 JavaScript的函数式编程
         *  3.2 闭包的定义
         *  3.3 闭包的执行过程
         *  3.4 闭包的内存泄漏
         *  3.4 AO不使用的属性优化

### 1.JavaScript内存管理 ###

不管什么样的编程语言, 在**代码的执行过程中都是需要给他分配内存的**, 不同的是**某些编程语言**需要我们**自己手动的管理内存, 某些编程语言**会可以**自动帮助我们管理内存:**

不管以什么样的方式管理内存, **内存管理都会有如下的生命周期:**

*  第一步: **分配你需要申请的内存**(申请);
 *  第二步: **使用分配的内存**(存放一些东西, 比如对象等);
 *  第三部: **不需要使用时, 对其进行释放;**

**不同的编程语言对于第一步和第三步会有不同的实现:**

*  **手动管理内存:比如C、C++，包括早期的OC, 都是需要手动来管理内存的申请和释放的**（malloc和free函数）;
 *  **自动管理内存:比如Java、JavaScript、Python、Swift、Dart等，他们有自动帮助我们管理内存;**

**对于开发者来说, JavaScript的内存管理是自动的、无形的。**

*  我们创建的**原始值、对象、函数…这一切都会占用内存**
 *  但是我们**并不需要手动来对他们进行管理， JavaScript引擎**会帮助我们处理好它

JavaScript会在**定义数据时**为我们分配内存

**但是内存分配方式是一样的吗?**

*  JS对于**原始数据类型内存的分配**会在执行时, 直接在**栈空间进行分配**;
 *  JS对于**复杂数据类型内存的分配**会在**堆内存中开辟一块空间**, 并且将这块空间的指针返回值变量引用

![在这里插入图片描述][7c607b553d4a4f6ab641622fbce63c0b.png_pic_center]

### 2.垃圾回收机制算法 ###

#### 2.1 垃圾回收机制简介 ####

因为**内存的大小是有限的**, 所以当**内存不再需要的时候**, 我们需要**对其进行释放**, 以腾出**更多的内存空间**

在**手动管理内存的语言**中, 我们需要通过**一些方式自己来释放不再需要的内存, 比如free函数**

*  但是这种管理的方式其实非常的低效, 影响我们编写逻辑的代码的效率;
 *  并且这种方式对**开发者的要求也很高**, 并且**一不小心就会产生内存泄漏**;

所以大部分**现代编程语言都是有自己的垃圾回收机制**

*  垃圾回收的英文是**Garbage Collection,** 简称**GC**
 *  对于**那些不再使用的对象,** 我们都称之为是**垃圾**, 他们需要被**回收**, 以释放更多的内存空间
 *  而我们的语言运行环境 , 比如java的运行环境JVM, JavaScript的运行环境js引擎都会内存**垃圾回收器**
 *  **垃圾回收器**我们也会**简称为GC**, 所以在很多地方你看到GC其实指的是垃圾回收器

但是这里又出现了另外一个很关键的问题, **GC怎么知道哪些对象是不再使用的呢?**

*  这里就要用到**GC的实现以及对应的算法**;

#### 2.2 常见的GC算法 ####

##### 2.2.1 引用计数 #####

**引用计数**:

*  当**一个对象有一个引用指向它**时, 那么这个**对象的引用就+1**;
 *  当一个**对象的引用为0**时, 这个对象就**可以被销毁掉;**

**这个算法有一个很大的弊端就是会产生循环引用；**

*  两个对象**互相引用产生一个循环**, 便永远**不会销毁**

![在这里插入图片描述][b0fbd4ad11334f2ba1dc5bc7ff973dd3.png_pic_center]

##### 2.2.2 标记清除 #####

**标记清除**:

*  标记清除的**核心思路**是**可达性（Reachability）**
 *  这个算法是设置一个**根对象(root object)**, **垃圾回收器**会定期**从这个根**开始, 找所有从根开始**有引用到的对象**, 对于那些**没有引用到的对象, 就认为是不可用的对象, 就会清除;**
 *  这个算法**可以很好的解决循环引用**的问题;
 *  **根对象是不能被销毁的**, 因此默认这个**根对象一般是window**
    
    ![在这里插入图片描述][f9b79d36a7194fe1978b9ffecfa61d9c.png_pic_center]

##### 2.2.3 其他优化补充 #####

JS引擎**比较广泛的**采用的就是**可达性中的标记清除算法**, 当然类似于V8引擎为了**进行更好的优化**, 他在算法的**实现细节上也会结合一些其他的算法**

1.  **标记整理**(Mark-Compact)和 “标记 - 清除” 相似;
    
     *  不同的是回收期间同时会将保留的存储对象**搬运汇集到连续的内存空间**, 从而**整合空闲空间, 避免内存碎片化**;
2.  **分代收集**(Generational collection) —— **对象被分成两组**: “**新的**” 和 “**旧的**”
    
     *  许多对象出现, 完成他们的工作并很快死去, 他们可以**很快被清理**;
     *  那些长期存活的对象会变得 “**老旧**” , 而且**被检查的频次也会减少**;
3.  **增量收集**(Incremental collection)
    
     *  如果有许多对象, 并且我们**试图一次遍历并标记整个对象集, 则可能需要一些时间, 并在执行过程中带来明显的延迟**
     *  所以引擎试图**将垃圾收集工作分成几部分来做**, 然后**将这几部分会逐一进行除了, 这样会有许多微小的延迟而不是一个大的延迟**;
4.  **闲时收集**(Idle-time collection)
    
     *  垃圾收集器**只会在CPU空闲时尝试运行, 以减少可能对代码执行**的影响

事实上，V8引擎为了提供内存的管理效率，对内存进行非常详细的划分：.

![在这里插入图片描述][ab90d3df190b4c018a741b8ef3d3cb51.png_pic_center]

### 3.闭包 ###

#### 3.1 JavaScript的函数式编程 ####

在前面我们说过，JavaScript是**支持函数式编程**的  
在JavaScript中，**函数是非常重要的，并且是一等公民**：

*  那么就意味着函数的使用是非常灵活的；
 *  **函数可以作为另外一个函数的参数**，也**可以作为另外一个函数的返回值**来使用；

**所以JavaScript存在很多的高阶函数：**

*  自己编写高阶函数
 *  使用内置的高阶函数

**目前在vue3和react开发中，也都在趋向于函数式编程：**

*  vue3 composition api: setup函数 -> 代码（函数hook，定义函数）；
 *  react：class -> function -> hooks

#### 3.2 闭包的定义 ####

这里先来看一下闭包的定义，分成两个：**在计算机科学中**和**在JavaScript中**。

在计算机科学中对闭包的定义（维基百科）：

*  闭包（英语：Closure），又称**词法闭包**（Lexical Closure）**或函数闭包**（function closures）；
 *  是在支持**头等函数**的编程语言中，实现词法绑定的一种技术；
 *  闭包在实现上是一个**结构体**，它存储了**一个函数和一个关联的环境**（相当于一个符号查找表）；
 *  闭包跟函数最大的区别在于，当捕捉闭包的时候，它的**自由变量**会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

**闭包的概念出现于60年代，最早实现闭包的程序是 Scheme，那么我们就可以理解为什么JavaScript中有闭包：**

*  因为JavaScript中有大量的设计是来源于**Scheme**的；

**我们再来看一下MDN对JavaScript闭包的解释：**

*  一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；
 *  也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；
 *  在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；

**那么我的理解和总结**：

*  一个普通的函数function，如果它**可以访问外层作用域的自由变量**，那么这个函数和周围环境就是一个闭包；
 *  从**广义的角度**来说：**JavaScript中的函数都是闭包**；
 *  从**狭义的角度**来说：**JavaScript中一个函数，如果访问了外层作用域的变量，那么它是一个闭包**；

#### 3.3 闭包的执行过程 ####

假如我们有如下一段代码

function createAdder(count) {
        
      function adder(num) {
        
        return count + num
      }
    
      return adder
    }
    
    var adder5 = createAdder(5)
    adder5(100)
    adder5(55)
    adder5(12)
    
    var adder8 = createAdder(8)
    adder8(22)
    adder8(35)
    adder8(7)
    
    console.log(adder5(24))
    console.log(adder8(30))

**执行过程中内存的表现**

*  第一次调用createAdder函数
    
    ![在这里插入图片描述][1727a00f5cf14df5b3384ebbad9649fd.png_pic_center]
 *  **createAdder函数调用完成**
 *  执行栈中的**执行上下文会被弹出**, 正常情况下, AO对象也该释放, 但是oxb00的函数中有作用域指向这个AO对象, 所以他不会被释放掉
 *  第二次调用createAdder函数
    
    ![在这里插入图片描述][5acef8c7d53a4c58b90468a3e25fa41f.png_pic_center]

#### 3.4 闭包的内存泄漏 ####

**那么我们为什么经常会说闭包是有内存泄露的呢？**

*  在上面的案例中，如果后续我们**不再使用adder8函数**了，那么**该函数对象应该要被销毁掉**，并且其**引用着的父作用域AO也应**  
    **该被销毁掉**；
 *  但是目前因为在**全局作用域(GO)中adder8变量对0xc00的函数对象有引用**，而**0cb00的作用域中AO（0x300）有引用**，所以**最终**  
    **会造成这些内存都是无法被释放的**；
 *  所以我们经常说的闭包会造成内存泄露，其实就是刚才的**引用链中的所有对象都是无法释**放的；

**那么，怎么解决这个问题呢？**

*  因为当**将adder8设置为null时**，就不再对函数对象0xc00有引用，那么对应的AO对象0x300也就不可达了；
 *  在GC的下一次检测中，它们**就会被销毁掉**；
 *      adder8 = null

![在这里插入图片描述][fd7f945798df42279be1d93365da64e3.png_pic_center]

#### 3.4 AO不使用的属性优化 ####

我们来研究一个问题：AO对象不会被销毁时，是否里面的所有属性都不会被释放？

*  浏览器会自动优化, 对AO中不适用的属性进行释放

[7c607b553d4a4f6ab641622fbce63c0b.png_pic_center]: https://img-blog.csdnimg.cn/7c607b553d4a4f6ab641622fbce63c0b.png#pic_center
[b0fbd4ad11334f2ba1dc5bc7ff973dd3.png_pic_center]: https://img-blog.csdnimg.cn/b0fbd4ad11334f2ba1dc5bc7ff973dd3.png#pic_center
[f9b79d36a7194fe1978b9ffecfa61d9c.png_pic_center]: https://img-blog.csdnimg.cn/f9b79d36a7194fe1978b9ffecfa61d9c.png#pic_center
[ab90d3df190b4c018a741b8ef3d3cb51.png_pic_center]: https://img-blog.csdnimg.cn/ab90d3df190b4c018a741b8ef3d3cb51.png#pic_center
[1727a00f5cf14df5b3384ebbad9649fd.png_pic_center]: https://img-blog.csdnimg.cn/1727a00f5cf14df5b3384ebbad9649fd.png#pic_center
[5acef8c7d53a4c58b90468a3e25fa41f.png_pic_center]: https://img-blog.csdnimg.cn/5acef8c7d53a4c58b90468a3e25fa41f.png#pic_center
[fd7f945798df42279be1d93365da64e3.png_pic_center]: https://img-blog.csdnimg.cn/fd7f945798df42279be1d93365da64e3.png#pic_center