JavaScript内存管理与闭包深度解析

1. 内存管理的理解

1.1 认识内存管理

无论使用何种编程语言，代码执行过程均涉及内存分配。不同语言的区别在于内存管理方式：部分语言需开发者手动管理，而另一些则由系统自动处理。

• 无论采取何种管理方式，内存的生命周期通常包含以下阶段：

  分配所需内存（申请）

  使用分配的内存（存储数据，如对象等）

  不再需要时，释放该内存

• 不同编程语言在第一步（申请）和第三步（释放）的实现上存在差异：

  • 手动管理内存：例如C、C++及早期OC，需开发者手动调用malloc和free等函数来管理内存的申请与释放。

  • 自动管理内存：例如Java、JavaScript、Python、Swift、Dart等，由语言运行时自动管理内存。

1.2 JavaScript的内存管理

• JavaScript的内存管理是自动且透明的：创建的原始值、对象、函数等都会占用内存。

• 对于原始数据类型，JS在执行时直接在栈空间进行分配。

• 对于复杂数据类型，JS会在堆内存中开辟一块空间，并将该空间的指针返回值赋给变量引用。

2. 垃圾回收（GC）

2.1 认识垃圾回收

• 由于内存资源有限，当内存不再被需要时，必须将其释放以腾出空间。

• 大多数现代编程语言都内置了垃圾回收机制：

  • 垃圾回收的英文是Garbage Collection，简称GC。

  • 那些不再使用的对象被称为垃圾，需要被回收以释放更多内存空间。

  • 语言运行环境，如Java的JVM或JavaScript的引擎，都会使用垃圾回收器（GC）来处理这些对象。

2.2 GC算法 – 引用计数

• 引用计数算法：

  • 当一个对象有一个引用指向它时，该对象的引用计数+1。

  • 当一个对象的引用计数为0时，该对象即可被销毁。

• 此算法存在一个显著缺陷：会产生循环引用问题。

  

2.3 GC算法 – 标记清除

• 标记清除算法：

  • 其核心思路是可达性（Reachability）。

  • 该算法设置一个根对象（在JS中通常指window），垃圾回收器定期从根开始，查找所有从根出发可达的对象。那些无法从根到达的对象，被视为不可用对象。

  • 此算法能有效解决循环引用问题。

  

2.4 其他算法优化补充

• JS引擎广泛采用基于可达性的标记清除算法。此外，如V8引擎为了进一步优化，会在实现细节上结合其他算法。

• 标记整理（Mark-Compact）与“标记－清除”相似。

  • 不同之处在于，回收期间会将保留的存储对象搬运并汇集到连续的内存空间，从而整合空闲空间，避免内存碎片化。

• 分代收集（Generational collection）—— 对象被分为两组：“新的”和“旧的”。

  • 许多对象出现、完成工作后很快消亡，它们可以被快速清理。

  • 那些长期存活的对象变得“老旧”，且被检查的频率会降低。

• 增量收集（Incremental collection）。

  • 如果对象数量众多，一次性遍历并标记整个对象集可能需要较长时间，并在执行过程中带来明显的延迟。

  • 因此，引擎试图将垃圾收集工作分成几部分逐一处理，从而产生许多微小的延迟而非一个大的延迟。

• 闲时收集（Idle-time collection）。

  • 垃圾收集器仅在CPU空闲时尝试运行，以尽量减少对代码执行的潜在影响。

3. 闭包的概念理解

3.1 JavaScript的函数式编程

• 在JavaScript中，函数至关重要，且作为一等公民：

  • 这意味着函数的使用非常灵活。

  • 函数可以作为另一个函数的参数，也可以作为返回值使用。

• JavaScript中存在大量高阶函数：

  • 开发者可以编写自定义高阶函数。

  • 也可以使用内置的高阶函数。

• 在vue3+react开发中，趋势也趋向于函数式编程：

  • vue3 composition api: setup函数 -> 代码（函数hook，定义函数）。

  • react：class -> function -> hooks。

3.2 定义

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

  • 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）。

  • 这是在支持头等函数的编程语言中，实现词法绑定的一种技术。

  • 闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）。

  • 闭包与函数的最大区别在于，当捕捉闭包时，其自由变量会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行。

• 闭包概念出现于60年代，最早实现闭包的程序是Scheme，因此我们可以理解为什么JavaScript中有闭包：因为JavaScript中有大量设计来源于Scheme。

• MDN对JavaScript闭包的解释：

  • 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。

  • 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

  • 在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

• 总结：

  • 一个普通函数function，如果它可以访问外层作用域的自由变量，那么这个函数和周围环境就是一个闭包。

  • 从广义的角度来说：JavaScript中的函数都是闭包。

  • 从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用域的变量，那么它是一个闭包。

4. 闭包的内存流程

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)

• 首次触发 createAdder 函数

  

• createAdder 执行结束

  

• 内部 adder 函数执行完毕

  

• 再次执行 createAdder

  

5. 闭包的内存泄漏

5.1 认识内存泄露

• 闭包可能导致内存泄露。

  • 在上述案例中，如果后续不再使用adder8函数，该函数对象应被销毁，且其引用的父作用域AO也应被销毁。

  • 但由于全局作用域下adder8变量对0xc00的函数对象有引用，而0xc00的作用域中AO（0x300）也有引用，最终导致这些内存无法被释放。

  • 闭包造成内存泄露，其实就是引用链中的所有对象都无法释放。

• 解决闭包的内存泄露

  • 当将adder8设置为null时，不再对函数对象0xc00有引用，对应的AO对象0x300也就不可达了。

  • 在GC的下一次检测中，它们就会被销毁。

  

5.2 内存泄露的测试

<button class="create">创建一系列的数组对象</button>
<button class="destroy">销毁一系列的数组对象</button>
<script>

function createArray() {
  // 4 1024 -> 4kb * 1024 -> 4M
  var arr = new Array(1024*1024).fill(1)
  function test() {
    console.log(arr)
  }
  return test
}

// 点击按钮
var totalArr = []

var createBtnEl = document.querySelector(".create")
var destroyBtnEl = document.querySelector(".destroy")
createBtnEl.onclick = function() {
  for (var i = 0; i < 100; i++) {
    totalArr.push(createArray())
  }
  console.log(totalArr.length)
}
destroyBtnEl.onclick = function() {
  // 释放
  totalArr = []
}
</script>

• 构建数组对象（占用内存）

  

• 销毁数组对象（释放内存）

  

5.3 浏览器的优化

function foo() {
  var name = "foo"
  var age = 18
  var height = 1.88

  function bar() {
    debugger
    console.log(name)
  }

  return bar
}

var fn = foo()
fn()

总结

到此这篇关于JavaScript内存管理与闭包的文章就介绍到这了,更多相关js内存管理与闭包内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！