js垃圾回收机制和闭包

偏执的太偏执、 2022-10-16 03:57 111阅读 0赞

## js垃圾回收机制 ##

### 概念 ###

js的内存是自动进行分配和回收的,内存在不使用的时候会被垃圾回收器自动进行回收,但是我们需要了解垃圾回收的机制,从而防止内存泄漏(内存无法被回收)

### 生命周期 ###

内存创建分配: 申请变量\\对象\\函数等

内存使用: 对内存进行读写,也就是使用变量或函数对象等

内存销毁: 变量\\函数\\对象等不再使用,即被垃圾回收自动回收掉

### 核心算法 ###

判断内存是否不再使用,如果是则回收

### 引用计数 ###

ie采用的是引用计数

计算当前内存被引用的次数，被引用一次计数+1，不被引用一次计数-1，当计数为0，该内存释放回收

var a = {  name: '张三', age: '李四' }// a地址 => {name: '张三', age: '李四'} 被引用次数 1
    var b = a // b地址 => {name: '张三', age: '李四'} 被引用次数 2
    var c = a // c地址 => {name: '张三', age: '李四'} 被引用次数 3
    
    a = 1 
    b = null
    c = true

优势：简单有效

问题：循环引用导致内存泄漏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70_pic_center]

上图解析：

1.  函数调用，分别创建a 地址 指向 一个内存（1号内存），b地址指向一个内存（2号内存）
2.  a.a1 也指向 2号内存，b.b1 指向1号内存
3.  此时1号内存被a、b.b1 引用 计数2
4.  此时2号内存被b、a.a1 引用 计数2
5.  fn函数调用执行后，fn内部数据不再使用所以要进行回收，将a指向1号内存 取消，b指向2号内存取消
6.  1号内存还被 b.b1所引用，计数1 无法回收
7.  2号内存还被 a.a1 所引用，计数1 无法回收

结论：1号内存、2号内存造成循环引用无法回收，使其内存泄漏

### 标记清楚 ###

现在浏览器采用的是标记清除

标记就是通过根节点（全局），标记所有从根节点开始的能够访问到的对象。未被标记的对象就是未被全局引用的垃圾对象。

最终清除所有未被标记的对象

function fn() { 
      var a = { }
      var b = { }
      a.a1 = b
      b.b1 = a
    }
    
    fn()

因为fn函数内部的数据在全局无法访问到，所以fn执行后，函数内部的数据自动被清除

function fn() { 
      var a = { }
      var b = { }
      a.a1 = b
      b.b1 = a
      return a
    }
    
    var obj = fn()

fn函数调用后，全局在引用着fn函数内部a的数据，a又用着b的数据，所以fn函数内部的数据全都不会清除

## 闭包 ##

### 概念 ###

一个函数和对其周围状态（**lexical environment，词法环境**）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是**闭包**（**closure**）。大白话也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域

function fn() { 
      var a = 10
      return function getData() { 
        return a
      }
    }
    
    var getData = fn()
    var a1 = getData()

### 原理 ###

闭包的原理就是利用作用域链的特性，首先在当前作用域访问数据，当前作用域访问不到，则向父级访问，父级也没有，一直找到全局。

### 作用 ###

数据私有化，防止污染全局

var a = 10
    function fn() { 
      console.log(a)
    }
    console.log(a)

将闭包代码修改后也同样可以访问到a数据，但是此时a的数据在全局，全局可以直接对a数据进行修改，而且全局也多了一个a这个数据，要尽量避免直接将数据直接放到全局

### 缺点 ###

闭包会造成内存泄漏,因为闭包的数据没有被回收

function fn() { 
      var a = 10
      return function getData() { 
        return a
      }
    }
    
    var getData = fn()
    var a1 = getData()

解决方案：将全局指向的函数重新置为null，利用标记清除的特性

function fn() { 
      var a = 10
      return function getData() { 
        return a
      }
    }
    
    var getData = fn()
    getData = null

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/c3d4d1e5c65b4d328f2860cb3f223f50.png