CODEWITHSUNDEEP
javascriptmemory-leaks
Kuan
Kuan

Reputation: 11389

How this pattern gets circular reference

All:

I am pretty new to Javascript memory management, currently reading:

https://www.ibm.com/developerworks/library/wa-memleak/wa-memleak-pdf.pdf

Inside this article, for Listing5, the explaination says:

In Listing 5 you see a closure in which a JavaScript object (obj) contains a reference to a DOM object (referenced by the id "element"). The DOM element, in turn, has a reference to the JavaScript obj. The resulting circular reference between the JavaScript object and the DOM object causes a memory leak.

could anyone give me some more detail about how this pattern gets circular reference built up and cause memory leak(a graph will be greatly appreciated)? Especially this part:

The DOM element, in turn, has a reference to the JavaScript obj.

document.write("Program to illustrate memory leak via closure");

window.onload = function outerFunction() {
    var obj = document.getElementById("element");

    obj.onclick = function innerFunction() {
        alert("Hi! I will leak");
    };

    obj.bigString = new Array(1000).join(new Array(2000).join("XXXXX"));
    // This is used to make the leak significant
};
<button id="element">Click Me</button>

Upvotes: 0

Views: 67

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

There is a problem only if you're planning on removing the button element at some point.

The circular reference happens because of the closure caused by outerFunction: innerFunction which is the click event listener of the button will have a reference to obj which is the button. Thus removing the button won't take effect, because a reference to it will always exists (inside its own click event listener), thwarting the garbage collector.

Removing an object in JS happens by the garbage collector when the object no longer have any references to it. Removing the button from the DOM by doing, for example:

document.getElementById("element").remove();

will remove the references to that button from the DOM, but the garbage collector will fail to remove it because there will be another reference to that button inside innerFunction which is to obj (which holds a reference to the button).

The circular reference here is that in order to remove/destroy innerFunction, the button must be destroyed first, and in order to remove/destroy the button, all references to it must be removed including the one inside innerFunction.

Note: In recent browsers you shouldn't worry about those event listeners causing memory leaks.

Upvotes: 1

Related Questions