Как двойные замыкания прерывают циркулярные ссылки?

Question

Я читал о том, как circular references cause memory leaks in IE, но я был очень смущен на примере, используя замыкание в замыкании разорвать циклическую ссылку:

function addHandler() { 
    var clickHandler = function() { 
     this.style.backgroundColor = 'red'; 
    }; 
    (function() { 
     var el = document.getElementById('el'); 
     el.onclick = clickHandler; 
    })(); 
} 

Моя голова получил все препирались с тем, что ссылки на то, что, которые являются замыканиями , которые являются объектами области. Может ли кто-то разбить его более явно, чем MDN? Благодарю.

Answer 1

Если у вас

function addHandler() { 
    var clickHandler = function() { 
     this.style.backgroundColor = 'red'; 
     // can access `el` here 
    }; 
    var el = document.getElementById('el'); 
    el.onclick = clickHandler; 
} 

затем el имеет ссылку на clickHandler, но clickHandler также имеет ссылку на el, потому что это замыкание. -> циклическая ссылка (в IE)

Вводя новую область, вы делаете elместного, так что он не доступен clickHandler, -> не циклическая ссылка.

function addHandler() { 
    var clickHandler = function() { 
     this.style.backgroundColor = 'red'; 
     // cannot access `el` here 
    }; 
    (function() { 
     // `el` is local to this immediately invoked function 
     var el = document.getElementById('el'); 
     el.onclick = clickHandler; 
    })(); 
} 

Таким образом, решение проблемы утечки памяти не ввести еще одно замыкания, это создать новой области, что «щиты» в ценности друг от друга (в одном направлении наименее).

Answer 2

Эмпирические правила, что я хожу по:

Для закрытия JavaScript должен быть создан, должен быть вложен функции и внутренняя функция должна иметь доступ к или есть ссылка на силу (давайте просто скажем, «потрогать» для краткости) переменная во внешней функции. Если ни один из этих двух критериев не найден, в JavaScript нет закрытия.

Утечки утечки возникают, когда такая переменная (упомянутая в предыдущем параграфе) во внешней функции оказывается элементом DOM.

В статье Mozilla, давайте посетить первый пример:

function addHandler() { 
    var el = document.getElementById('el'); 
    el.onclick = function() { 
     this.style.backgroundColor = 'red'; 
    }; 
} 

Очевидно, что есть одна функции вложенной внутри другой функции, а внутренняя функция присваивается свойство переменного (эля) во внешнем объеме, поэтому создается закрытие. Эта переменная el также является элементом DOM, поэтому происходит утечка памяти, как описано в статье.

Во втором примере, что вы в курсе,

function addHandler() { 
    var clickHandler = function() { 
     this.style.backgroundColor = 'red'; 
    }; 
    (function() { 
     var el = document.getElementById('el'); 
     el.onclick = clickHandler; 
    })(); 
} 

Там есть внешняя функция, и вложенными внутри этой внешней функции 2 вложенными (внутренние) функции, но они находятся на том же уровне, что означает один не является вложенные внутри другого. Вторая вложенная функция также имеет доступ к локальной переменной (clickHandler) во внешней функции, поэтому создается замыкание, которое создается. Тем не менее, утечки памяти отсутствуют, потому что эта локальная переменная (clickHandler) во внешней функции не является элементом DOM. Локальная переменная el не способствует утечке памяти, поскольку она локальна для второй вложенной функции и не определена во внешней функции addHandler().Другими словами, он является локальным для второй вложенной функции, он недоступен для первой вложенной функции, поэтому нет возможности утечки памяти.