Утечки памяти в замыканиях JavaScript

Цитата из Google JavaScript style guide ^[1]:

Возможность создавать замыкания — похоже, самая полезная и часто остающаяся без внимания особенность JS.

Однако, одну вещь нужно иметь виду: замыкание хранит указатель на замыкаемый им контекст. В результате, прикрепление замыкания к элементу DOM может породить циклическую зависимость и, следовательно, утечку памяти. Например, в следующем куске кода:

function foo(element, a, b) {
  element.onclick = function() { /* использует a и b */ };
}

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

В подобных случаях код нужно структурировать следующим образом:

function foo(element, a, b) {
  element.onclick = bar(a, b);
}

function bar(a, b) {
  return function() { /* использует a и b */ }
}

Похоже, на текущий момент это наиболее часто встречающийся на практике пример утечки памяти в JavaScript.

Автор: mkaz