前端 JS 经典:闭包与内存泄漏、垃圾回收

简介: 前端 JS 经典:闭包与内存泄漏、垃圾回收

1. 闭包

函数嵌套函数,内部函数可以引用外部函数的参数和变量。参数和变量不会被垃圾回收机制收回。

2. 垃圾回收机制

什么是垃圾?就是不再需要的内存。什么是垃圾回收机制?就是浏览器会自动回收掉我们不要的数据。那浏览器怎么判断什么是我们不要的数据?就是我们无法触达的数据,也就是访问不到的数据。

3. 内存泄漏

有些数据是我们不要的,但是还能被访问,被触达。浏览器的垃圾回收机制无法将这些数据回收,这就是内存泄漏。

那怎么处理内存泄漏?我们需要让这些内存不可触达,垃圾回收机制就会把它回收掉,怎么让它不可触达呢,设置为 null,之前的数据就无法触达了,就能被回收掉。

4. 闭包导致的内存泄漏

在闭包中持有了不再需要的函数引用,会导致函数关联的词法环境无法销毁,从而导致内存泄漏。如下:dfn 函数在我们调用一次后,其实不在需要了,但是我们没有将它设置为 null,那么它所关联的 arr 变量,还可以被访问到,浏览器的垃圾回收机制就不会回收它,就会导致内存泄漏。

function fn() {
  const arr = [1, 2, 3, 4];
  function _fn() {
    console.log(arr);
  }
  return _fn;
}
const dfn = fn();
dfn();

当多个函数共享词法环境时,会导致词法环境膨胀,从而导致出现无法触达也无法回收的内存空间。从而导致内存泄漏。如下:_fn 函数没用到 arr 数据,arr 数据我们无法触达,但是在同一个词法环境中,还有一个函数用到了 arr,垃圾回收机制不敢将它回收。

function fn() {
  const arr = [1, 2, 3, 4];
  function __fn() {
    console.log(arr);
  }
  function _fn() {}
  return _fn;
}
const dfn = fn();
dfn();

总结:永远不要提前优化,出了问题再去优化。这样我们开发的时候,心智负担就小很多。

目录
相关文章
|
3天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
18天前
|
JavaScript 前端开发 Java
JavaScript基础知识-垃圾回收
关于JavaScript垃圾回收基础知识的介绍。
26 1
JavaScript基础知识-垃圾回收
|
8天前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
本文深入探讨了JavaScript中闭包的概念,从定义、作用域链和实际应用等方面进行了详细阐述。通过生动的比喻和实例代码,帮助读者理解闭包在函数执行上下文中的重要性,以及如何在实际开发中有效利用闭包解决复杂问题。同时,文章也指出了过度使用闭包可能导致的潜在问题,并给出了相应的优化建议。
|
21天前
|
Web App开发 存储 监控
Node.js中的内存泄漏
【8月更文挑战第31天】Node.js中的内存泄漏
36 1
|
29天前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
28 1
|
29天前
|
前端开发 JavaScript Java
揭开 JavaScript 垃圾回收的秘密——一场与内存泄漏的生死较量,让你的代码从此焕然一新!
【8月更文挑战第23天】本文通过多个实例深入探讨了JavaScript中的垃圾回收机制及其对应用性能的影响。首先介绍了基本的内存管理方式,随后分析了变量不再使用时的回收过程。接着,通过事件监听器未被移除及全局变量管理不当等场景展示了常见的内存泄漏问题。最后,文章介绍了使用`WeakRef`和`FinalizationRegistry`等现代API来有效避免内存泄漏的方法。理解并运用这些技术能显著提升Web应用的稳定性和效率。
72 0
|
21天前
|
自然语言处理 JavaScript 前端开发
|
29天前
|
自然语言处理 前端开发 JavaScript
前端进阶必读:JS闭包深度解析,掌握这一特性,你的代码将焕然一新!
【8月更文挑战第23天】闭包是JavaScript的一项高级功能,让函数能够访问和操作外部函数作用域中的变量。本文深入解析闭包概念、组成及应用场景。闭包由函数及其词法环境构成,通过在一个函数内定义另一个函数来创建。它有助于封装私有变量、维持状态和动态生成函数。然而,不当使用闭包可能导致内存泄漏或性能问题。掌握闭包对于实现模块化代码和成为优秀前端开发者至关重要。
30 0
|
4月前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
86 5
|
4月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试