JavaScript Academy · 课时

避免内存泄漏——闭包、计时器与引用

Q: 「避免内存泄漏——闭包、计时器与引用」这节课中我会学到什么？

通过清除计时器、限制闭包和释放未使用的引用来防止内存泄漏；使用初学者易于应用的小型模式 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

通过清除计时器、限制闭包和释放未使用的引用来防止内存泄漏；使用初学者易于应用的小型模式

避免内存泄漏——闭包、计时器与引用 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

什么是内存泄漏

目标：避免简单的内存泄漏。

始终清除计时器
不要保留未使用的引用
让闭包保持简小
优先使用生命周期较短的数据

清除间隔计时器

保存间隔计时器的标识符；在清理时调用 clearInterval，这样计时器及其捕获的内容就可以被回收。

// Start an interval and then clear it to avoid leaks
function startTicker() {
  // store id so we can clear later
  const id = setInterval(function () {
    // work would run every X ms; omitted for demo
  }, 1000);

  // simulate screen close / cleanup
  clearInterval(id);
  console.log("interval cleared");
}

startTicker();

缩小闭包

闭包会保留它们捕获的内容。在可能的情况下，请捕获较小的值，而不是整个对象。

// Avoid capturing large objects when only small data is needed
function makeReporter(bigArray) {
  // BAD: store the whole array inside the closure
  const large = bigArray;

  return function reportLength() {
    // Only the length is used
    return large.length;
  };
}

// BETTER: capture only what you need
function makeReporterBetter(bigArray) {
  const count = bigArray.length; // small number
  return function reportLength() {
    return count;
  };
}

const arr = new Array(1000).fill(0);
const bad = makeReporter(arr);
const good = makeReporterBetter(arr);
console.log("bad:", bad(), "good:", good());

限制缓冲区大小

长期存在的数组或映射如果无限增长，可能会造成内存泄漏；请定期裁剪或重置它们。

// A growing buffer can leak if never trimmed or reset
const buffer = []; // module-level array

function logItem(x) {
  buffer.push(x); // grows forever if not managed
}

// Simulate usage
logItem("a");
logItem("b");

// FIX: trim or reset when size is over a limit
function trimBuffer(limit) {
  if (buffer.length > limit) {
    buffer.length = limit; // drop old items
  }
}

trimBuffer(1);
console.log("buffer size:", buffer.length);

初识 WeakMap

WeakMap 适合附加元数据，同时不会阻止键对象被垃圾回收。

// WeakMap holds keys weakly: when the object is gone, the entry can be collected
const meta = new WeakMap();

function attachMeta(obj, info) {
  meta.set(obj, info);
}

function readMeta(obj) {
  return meta.get(obj); // undefined if not set or collected
}

let user = { name: "Ayla" };
attachMeta(user, { seen: true });
console.log("meta now:", readMeta(user));

// Later: drop the only strong reference
user = null; // after this, the object and its metadata can be GC'd at some point
console.log("object reference dropped (cannot show GC in console)");

防止内存泄漏的习惯

检查清单：

保存计时器标识符；清理时调用 clearInterval/clearTimeout。
在闭包中只捕获需要的值。
裁剪/重置长期存在的数组或映射。
优先使用短生命周期的数据；完成后删除引用。

计时器清理测验

快速检查：计时器与内存泄漏。

回顾

回顾：清除计时器，避免在闭包中捕获超大的对象，并裁剪或删除长期存在的引用。简短的清理操作可以防止适合初学者的应用发生内存泄漏。

常见问题解答

「避免内存泄漏——闭包、计时器与引用」课时是免费的吗？

是的 — 「避免内存泄漏——闭包、计时器与引用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「避免内存泄漏——闭包、计时器与引用」这节课中我会学到什么？

通过清除计时器、限制闭包和释放未使用的引用来防止内存泄漏；使用初学者易于应用的小型模式你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「避免内存泄漏——闭包、计时器与引用」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy