首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS内存泄露/垃圾回收/闭包

JS内存泄露/垃圾回收/闭包

作者头像
biaoblog.cn 个人博客
发布于 2025-05-22 02:43:59
发布于 2025-05-22 02:43:59
10100
代码可运行
举报
运行总次数:0
代码可运行

一.垃圾回收&&内存泄露

前端垃圾回收(Garbage Collection, GC)主要由 JavaScript 引擎自动完成,用于释放不再被引用的内存。虽然前端开发者通常不需要手动释放内存,但了解一些常见导致内存泄漏和垃圾回收场景,对性能优化和避免 Bug 很有帮助。

需要手动取消引用,辅助GC自动回收的场景(内存泄露了)

1.如果引用类型的变量 - 数据作用域一直存在(全局)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let obj = { name: 'Alice' };
obj = null; // 原来的对象没有被引用,可以被回收

拓展在js中“引用”的概念

引用”不是字面上的“引用”这个词,而是编程里一个具体的概念:

引用 = 变量里存的是某个内存地址,指向某个对象的真实位置。

换句话说:

  • 当变量是引用类型(对象、数组、函数)时,变量里面存的是对象所在的内存地址(指针)。
  • 当变量是基本类型(数字、字符串、布尔等)时,变量里存的是值本身。

举例说:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let obj = { name: 'Alice' }; // obj 里面存的,是对象的地址(引用)

let a = obj["name"];     // a 里面存的,是字符串 'Alice' 本身(值),不是引用

2.事件监听器 window.addEventListener

3.定时器setTimeout、setInterval

4.DOM 元素被移除,引用也被清除

二.闭包导致的内存泄露

简单理解 闭包就是 函数A套函数B,函数A的变量,函数B也可以访问

内存泄露导致的原因就是 正常执行完函数A,函数A中的变量会被自动回收,但是由于函数B还持续的对函数A的变量持续引用 而导致函数A中的变量无法被自动回收

举例说明:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function A() {
  let a = [1, 2, 3];

  return () => {
    return a[0];
  };
}

let value = A();

调用 A(),函数内部创建了数组 a

A() 返回了一个箭头函数,这个箭头函数形成了闭包,能访问 a

你把这个闭包函数赋给了外部变量 value

value 现在是一个函数,它闭包着 A 作用域里的变量 a

只要 value 存在,闭包中的 a 就不会被垃圾回收。

当你不再需要这个闭包,可以手动断开引用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
value = null;  // 这样闭包里的 a 可以被回收

总结

  • 闭包函数被返回并赋值给变量,形成闭包,引用了外部变量。
  • 变量存在时,闭包变量不被回收。变量置空后,闭包变量可被回收。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一.垃圾回收&&内存泄露
    • 需要手动取消引用,辅助GC自动回收的场景(内存泄露了)
  • 二.闭包导致的内存泄露
    • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档