JavaScript中闭包会导致内存泄漏吗

序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。更多的文章以及资料关注公众【前端雾恋】

背景

我们在工作中或者生活中或多或少都会讨论闭包函数内存泄漏的问题，那什么是内存泄漏呢？内存泄漏就是：对象内存不能被浏览器回收，或者说没有被浏览器回收。

大家在考虑闭包是否浏览器回收的时候，随便考虑一下，随意的一个变量内存会被回收吗？

我们学习以前先去看看FinalizationRegistry 内置API。

一个对象是否被回收

我们查看示例代码后会发现，obj根本没有被回收？那么说明对象没有在未知是否还没使用时，对象不会被浏览器主动回收。

javascript 复制代码

let obj = {
  name: '5544554'
}
const cleanup = new FinalizationRegistry((key) => {
  console.log('内存回收', key);
})
cleanup.register(obj, 'obj');

我们现在查看该示例代码，当我们手动回收obj以后浏览器会回收清除该内存。

javascript 复制代码

but.addEventListener('click', () => {
  obj = null;
  console.log('点击');
});

let obj = {
  name: '5544554'
}
const cleanup = new FinalizationRegistry((key) => {
  console.log('内存回收', key); // 内存回收 obj
})
cleanup.register(obj, 'obj');

闭包函数

以下示例代码就是常见的最简单的闭包函数，那么我们就来看看他们是否会被浏览器回收。

javascript 复制代码

function closure() {
  const obj = {
    id: 1,
    name: '张三'
  }
  return function () {
    return obj
  }
}
let fn = closure();
let b = fn();

根据以下代码我们静静的等待是否回触发内存回收，我们发现闭包跟普通的对象没有什么区别，在这个时候都不会触发浏览器回收机制。

javascript 复制代码

function closure() {
  const obj = {
    id: 1,
    name: '张三'
  }
  return function () {
    return obj
  }
}
let fn = closure();
let b = fn();
const cleanup = new FinalizationRegistry((key) => {
  console.log('内存回收', key);
})
cleanup.register(b, 'b');

查看以下示例代码：我们手动去清除闭包函数的时候会发现，浏览器回收机制触发了（可能会等几秒中）。

javascript 复制代码

but.addEventListener('click', () => {
  b = null;
  fn = null;
  console.log('点击');
})

总结

闭包不会导致内存泄漏，任意对象使用不到都可能会导致内存泄漏；所以我们不用担心闭包泄漏问题了，只要我们不瞎操作他就不会存在这个问题。