Detailed JavaScript closures

To fully understand the JavaScript closure, first understand some of the basic principles of js, and then I give some examples to explain the Closure.

An execution environment (excution Context) is created when JavaScript is executed, and the execution environment defines other data that the variable or function can Access. Each execution environment has a variable object associated with it (variable object, which is called Domain objects), and all variables and functions defined in the execution environment are stored in this Object. Although the code we write does not have access to this object, the parser uses it in the background when it processes the Data.

The global execution environment is the outermost one of the execution Environment. Depending on the host environment that JS implements, the environment objects are Different. In the browser, the global execution environment is the global variable of window,node.js, and all global variables and methods are saved in the global Object.

Each function has its own execution environment. When the call enters a function, the execution environment of the function is Created. When the code runs in the execution environment, he creates a scope chain (scope Chain) to hold the variable Object. His role is to save an ordered set of variables or functions that the execution environment can ACCESS. The first of the scope is the variable object of the execution environment in which the code is currently Executing. If the current execution environment is a function, the active object of the function is used as the variable object, with only one variable arguments at the Beginning. The next variable object in the scope chain is the external environment that contains the current environment variable, which is his caller, and the next is the outer one, to the global execution Environment.

therefore, in an executing method to access a variable that does not exist in the execution environment does not error, the parser will be from the top of the scope chain of the variable object to find, if you cannot find the next execution environment variable object, until the global environment Variable. If any, Stop the Lookup. If a global variable object is found or is not found, an error occurs.

Simply put, a function body is an execution environment, and when a function executes, it creates a chain of variables with its own variable object, as well as an outer variable object.

Example 1: Global Execution Environment

var value1 =  1; var value2 = 2;

Run the above code directly, that is, we have defined two variables in a global execution environment, so they will be saved in the global Object. As shown

Example 2. Methods in the Global environment

var value1 = one; var value2 =; function log () {    var logvalue = "writing ... ";    " Value1: ", value1,"  value2 ", value2);} Log ();

In the log function, his scope chain contains two Objects: one is its own variable object (containing the arguments Object) and the Global environment variable object, so when accessing value1 and value2 within the function, you can find them both along the scope chain.

Example 3: closures (nested Functions)

var value1 = one; var value2 =; function log () {    var logvalue = "writing ... ";     function nested () {        "value1:", value1, "  value2", value2);    }     return nested;} var fun1 = log (); fun1 ();

When you create a function within a function, the closure is Created. When the function starts executing, the closure allocates stack frames on the heap and is not freed when the function returns. There are three execution environments in the above code: one is the global execution environment, one is the local execution environment for log (), and the other is the execution environment of nested (). Nested () can access the variables of log and global. log () can access the variables of its own global:

The nested () function is returned from the log () method, his scope chain is initialized to all active objects defined in log (), and the global variable object, so that the nested () function can access all the Variables. More importantly, after the execution of log (), his variable object is not destroyed because the nested () function is still referencing the variable Object. It can also be said thatafter the log () function is finished, the scope chain of log () is destroyed, but the variable object remains in memory until nested () is destroyed, the referenced log () variable object is Destroyed.

Programmers with C + + or C experience may think that returning a pointer to a method, the nested and FUN1 variables are two pointers to this method, but in fact, the C + + speech pointer method has a very different reference to a method in Javascript. In JavaScript you can assume that a method's reference variable has a pointer to a method, and there is a hidden pointer to the Closure. I'm not going to give you any other examples, so it's easy to understand the principle of closure.

Detailed JavaScript closures