Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "javascript closure will cause memory leakage?" In the actual case operation process, many people will encounter such a dilemma, and then let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. mark clear

The most common garbage collection method in JavaScript is mark-and-sweep. When the garbage collector runs, it tags all variables stored in memory (in any way). It then untags variables in the environment and variables referenced by variables in the environment. Variables marked after this are considered ready for deletion because they are no longer accessible to variables in the environment. ***, The garbage collector completes the memory cleanup, destroying the marked values and reclaiming the memory space they occupy.

2. reference count

Reference counting means keeping track of the number of times each value is referenced. When a variable is declared and a reference type value is assigned to it, the number of references to that value is 1. If the same value is assigned to another variable, the number of references to that value is increased by 1. Conversely, if the variable containing a reference to that value takes another value, the number of references to that value is decremented by 1. When the number of references to this value becomes 0, it means that there is no way to access this value, so you can reclaim the memory space it occupies. This way, the next time the garbage collector runs, it frees up memory occupied by zero-reference values.

Netscape Navigator 3.0 was one of the first browsers to use a reference counting policy, but it soon ran into a serious problem. See this example:

function problem(){ var objectA = new Object(); var objectB = new Object(); objectA.someOtherObject = objectB; objectB.anotherObject = objectA; }

Description: objectA and objectB refer to each other through their respective attributes, i.e., the number of references to both objects is 2. In implementations that adopt the tag cleanup strategy, since both objects leave the scope after the function is executed, this mutual reference is not a problem. But in implementations that use reference counting, objectA and objectB also indicate that they will continue to exist after the function is executed, because their references will never be zero. If this function is called multiple times, a large amount of memory will not be reclaimed.

To this end, Netscape dropped reference counting in Navigator 4.0, but the trouble with reference counting did not end there. Before IE9, some objects were not native JavaScript objects. For example, the objects in its BOM and DOM are implemented in C++ in the form of COM(Component Object Model) objects, and the garbage collection mechanism of COM objects adopts the reference counting strategy. Thus, even though IE's JavaScript engine is implemented using a mark-up policy, COM objects accessed by JavaScript are still based on a reference-counting policy. In other words, whenever COM objects are involved in IE, there is a circular reference problem.

For example:

var element = document.getElementById("some_element"); var myObject = new Object(); myObject.element = element; element.someObject = myObject;

A circular reference is created between a DOM element and a native JavaScript object. The variable myObject has an attribute named element that points to the element object, and the variable element also has an attribute named someObject that refers back to myObject. Because of this circular reference, even if the DOM in the example is removed from the page, it will never be recycled.

Workaround: Set the variable to null to break the link between the variable and the value it previously referenced.

myObject.element = null; element.someObject = null;

After reading the above, let me get to the point.

Closures do not cause memory leaks

Because versions prior to IE 9 use different garbage collections for JScript objects and COM objects. So closures cause some special problems in these versions of IE. Specifically, if the closure's scope chain holds an HTML element, it means that the element cannot be destroyed.

function assignHandler(){ var element = document.getElementById("someElement"); element.onclick = function(){ alert(element.id); }; }

The above code creates a closure as an element event handler, which in turn creates a circular reference. Because anonymous functions hold a reference to the active object of assignHandler(), it is impossible to reduce the number of references to element. As long as an anonymous function exists, the number of references to element is at least 1, so the memory it occupies will never be reclaimed.

The solution, mentioned in the introduction, is to store a copy of element.id in a variable, thereby eliminating circular references to that variable in closures and setting the element variable to null.

function assignHandler(){ var element = document.getElementById("someElement"); var id = element.id; element.onclick = function(){ alert(id); }; element = null; }"javascript closure will cause memory leakage" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.