The closure in JavaScript (Closure) describes _javascript techniques in detail

Closures are an important feature of JavaScript, and their greatest function is to save information during the operation of a function. In JavaScript, the many attributes of closures originate from the scope chain in the process of function invocation.

Function call object and variable scope chain

For every function call in JavaScript, JavaScript creates a local object to store the local variables defined in the function, and if there is a nested defined function within the function (nested function), Then JavaScript defines a nested local object on top of the already defined local object. For a function, how many layers of nested function definitions are inside, and how many layers of nested local objects there are. This local object is referred to as the "Call object" in ECMAScript 3, and ECMAScript 5 is renamed "Declarative Environment Record", but the individual thinks it is ECMAScript The names in 3 are easier to understand. Take the following function call as an example:

Copy Code code as follows:

function f (x) {
var a = 10;
return a*x;
}
Console.log (f (6));//60

In this simple example, when the F () function is invoked, JavaScript creates a calling object for the F () function (known as f_invokeobj), with two properties inside the F_invokeobj object: A and X; when run F (), the A value is 10 and the X value is 6, So the final return result is 60. This is illustrated below:

When a function is nested, JavaScript creates multiple function call objects:

Copy Code code as follows:

function f (x) {
var a = 10;
return a*g (x);
function g (b) {
return b*b;
}
}
Console.log (f (6));//360

In this case, when the F () function is invoked, JavaScript creates a Call object (F_invokeobj) of the F () function with two properties of a and x,a values of 10 and X value 6, and JavaScript to G () in the F () function when running F () function to resolve the definition and create the Call object (G_invokeobj) of G (), which has a property b,b value identical to the passed-in parameter X of 6, so the final return result is 360. This is illustrated below:

As you can see, the function call object forms a chain. When the inline function g () runs and needs to get the value of the variable, the search is started from the nearest function call object, and if it cannot be searched, it is searched in the farther call object along the chain of function call object, which is called "Scope chain of variables". If the same variable appears in the two function invocation object, the function takes the value of the variable from its nearest calling object:

Copy Code code as follows:

function f (x) {
var a = 10;
return a*g (x);
function g (b) {
var a = 1;
return b*b*a;
}
}
Console.log (f (6));//360, not 3600

In the example above, both the call object (G_invokeobj) of the G () function and the Call object (F_invokeobj) of the F () function have variable A and the value of a is different, and when the G () function is run, a value of 1 is used inside the g () function, and in G () The a value used outside the function is 10. The function call object chain at this point in the diagram is as follows:

What is a closure?

In JavaScript, all functions (function) are objects, while defining functions produces the corresponding function call object chain, one function definition corresponds to a function call object chain. As long as the function object exists, the corresponding function call object exists; Once a function is no longer in use, the corresponding function call object is garbage collected, and the one by one combination of this function object and function call object chain is called "closure". In the example above F () and g () functions, there are two closures: the F () function object and the F_invokeobj object form a closure, while the G () function object and the G_invokeobj-f_invokeobj object chain form the second closure. When the G () function is finished, the G () closure is garbage collected because the G () function is no longer in use, and after the F () function completes, the F () closure is garbage collected for the same reason.

From the definition of closures you can conclude that all JavaScript functions are closed after they are defined-because all functions are objects, and all functions have their corresponding call object chains after they are executed.

However, the case for a nested function is what makes the closure really useful. Because the inline function is defined when the external function is running, the value of the variable stored in the closure of the inline function (especially the local variable value of the external function) is the value of the run process. As long as the inline function object is still present, the closure is still present (the value of the variable in the closure is not changed), thus realizing the purpose of saving the information of the function's running process. Consider the following example:

Copy Code code as follows:

var a = "Outside";
function f () {
var a = "inside";
function g () {return A;}
return g;
}
var result = f ();
Console.log (Result ());//inside

In this example, when the F () function is run, the G () function is defined, the closure of the G () function is created, and the G () closure contains the chain of G_invokeobj-f_invokeobj objects, thus preserving the value of variable A in the execution of the F () function. When the Console.log () statement is executed, the G () closure still exists because the G function object still exists, and JavaScript uses the still existing G () closure and gets the value of the variable a ("inside") when it runs the remaining G-function object.