0Pricing
JavaScript Academy · Урок

Как избегать утечек — замыкания, таймеры и ссылки

Предотвращайте утечки памяти, очищая таймеры, ограничивая замыкания и удаляя неиспользуемые ссылки; применяйте небольшие приёмы, доступные начинающим

«Как избегать утечек — замыкания, таймеры и ссылки» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Что такое утечка?

Цель: избегать простых утечек памяти.

  • Всегда очищайте таймеры
  • Не храните неиспользуемые ссылки
  • Делайте замыкания небольшими
  • Предпочитайте данные с коротким сроком жизни
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 1

Очищайте интервалы

Сохраняйте идентификатор интервала и вызывайте 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();
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 2

Уменьшайте замыкания

Замыкания сохраняют всё, что они захватывают. По возможности захватывайте небольшие значения, а не целые объекты.

// 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());
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 3

Ограничивайте буферы

Долгоживущие массивы и отображения могут приводить к утечке памяти, если растут без ограничений; регулярно сокращайте или сбрасывайте их.

// 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);
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 4

Знакомство с 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)");
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 5

Привычки для предотвращения утечек

Список проверок:

  • Сохраняйте идентификаторы таймеров; при очистке вызывайте clearInterval/clearTimeout.
  • В замыканиях захватывайте только необходимые значения.
  • Регулярно сокращайте/сбрасывайте долгоживущие массивы и отображения.
  • Предпочитайте данные с коротким сроком жизни; после завершения удаляйте ссылки.
Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 6

Викторина об очистке таймеров

Быстрая проверка: таймеры и утечки.

Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 7

Итоги

Итоги: очищайте таймеры, не захватывайте огромные объекты в замыканиях и сокращайте или удаляйте долгоживущие ссылки. Небольшая очистка помогает приложениям для начинающих не допускать утечек памяти.

Как избегать утечек — замыкания, таймеры и ссылки — иллюстрация 8

Часто задаваемые вопросы

Урок «Как избегать утечек — замыкания, таймеры и ссылки» бесплатный?

Да — полный текст урока «Как избегать утечек — замыкания, таймеры и ссылки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Как избегать утечек — замыкания, таймеры и ссылки»?

Предотвращайте утечки памяти, очищая таймеры, ограничивая замыкания и удаляя неиспользуемые ссылки; применяйте небольшие приёмы, доступные начинающим Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Как избегать утечек — замыкания, таймеры и ссылки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы Big-O, горячие и холодные участки (полезные приёмы для начинающих)
  2. Как избегать утечек — замыкания, таймеры и ссылки
  3. Введение в профилирование (Node/DevTools) — простые привычки измерения времени
← Назад к JavaScript Academy