The scope chain of closures in Javascript

The scope defines the members that can be accessed in the current context. In Javascript, it is divided into global scopes and function scopes. nested scopes can be implemented through function nesting. Closures generally occur in nested scopes. Closures are one of the most powerful features of JavaScript. Many advanced applications rely on closures. Such as OO Private Members and modularization. However, although the closure is powerful, it generally occupies memory. In addition, improper use may cause memory leakage. jser who knows about the closure generally knows these problems of the closure, this article first describes the relationship between closure and scope chain, and then analyzes the causes of these problems. The following is an example code of a closure:

View sourceprint? Var name = "windowss name ";

Var object = {

Name: "objects name ",

GetNameFunc: function (){

Var that = this;

Return function (){

Return that. name;

}

}

};

Console. log (object. getNameFunc ()());

When javascript code is executed, an execution context object is created. The execution context object contains a scope chain, which consists of one or more variable objects, the scope chain stores references to variable objects. A variable object defines the variables and functions declared in the current scope. During code execution, the JAVASCRIPT engine will retrieve the members of variable objects in the function chain from top to bottom to parse the variables or functions to be accessed (read or written, during the search process, if a variable pair in the scope chain finds the matching identifier, the search will be terminated. In this way, if a variable with the same name exists in the code, we can identify the variable to be operated.
After the code is loaded, the Javascript engine creates a global execution context. The scope chain of the global execution context contains only one global variable object. Javascript function objects have a private socpe attribute. When a function is created, the current scope chain is used to initialize the function scope attribute. When a function is executed, the execution context object of the function and the variable object in the current scope are created. when creating the execution context object of the function, the scope attribute of the function is used to assign a value to the scope chain of the execution context object, put the created variable object at the top of the scope chain to initialize the scope chain of the execution context. Variable objects at the top of the scope chain are also called activity objects. By default, when a function returns, its activity object and scope chain will be destroyed. This is also why the external function cannot access members defined in the function. However, when a closure occurs, when an internal function is created, the scope attribute of the internal function points to the scope chain of the external function that contains it. The internal function references the activity object of the external function. When the external function returns, its activity object is not released, the active objects of the outer function will not be released until the internal function that references it is destroyed. Therefore, the internal functions it contains can still access the Members defined in the external functions, which is also the reason that the closure occupies memory.
Memory leakage occurs because some browsers use reference counting as the garbage collection mechanism. When a circular reference occurs in our code, the resources cannot be recycled, causing memory leakage. Memory leakage occurs sometimes because of a significant loop reference in our code, sometimes less obvious. For the former, we can find the problem by checking the code carefully. For the latter, we need to have a sufficient understanding of the closure to find out. The following code is used:

View sourceprint? Function outerFunc (){

Var obj = document. getElementById ("element ");

Obj. onclick = function innerFunc (){

Alert ("Hi! I will leak ");

};

Obj. bigString = new Array (1000). join (new Array (3000). join ("XXXXX "));

// This is used to make the leak significant

};

In the above Code, the local variable obj in the external function outerFunc references the Dom element whose ID is element in the document, obj. onclick points to the reference of the internal function innerFunc. The scope attribute of the internal function innerFunc points to the reference of the activity object of the external function outerFunc, the obj Member of the activity object points to the Dom element whose ID is element in the document again to form a circular reference.