How to understand and apply closures
What is a closure?
Another function is defined inside the function, and this subfunction can be called a closure.
Characteristics of closures
One of the features of a closure is that variables inside the closure can refer to external functions.
Principle
To understand the principle of closures, the most important thing is to understand the scope chain mechanism of JavaScript.
Scope
There are two kinds of scopes in js, global scope and function scope (local scope). In addition, js follows the rules of static scope.
Domain chain
The chain formed by scope is called scope chain, but this scope chain stores pointers to each active object. Let's take a look at the specific formation process of the scope chain: the global scope always exists, and the function scope is generated only when it is executed. When the function is defined, the function's `scope` attribute stores the active objects (pointers) under the scope outside the function, including global variable objects, so it may be a list of pointers. Then, when we call the function, we will first create an execution environment for it, and then create a scope chain. The scope chain first copies the value of the `scope` attribute, and then pushes its own active object to the front of the scope chain. This activity object is composed of variables under the scope of the function, so that the scope chain of the function is formed.
Take a chestnut:
Var g = 1 var out function out () {var inner = "out"; return function () {var inner = "inner"; return out;}}
Sample diagram
The sample diagram explains why closures have the property of holding external function variables.
When the function is executed, the scope chain will be destroyed and the memory previously occupied will be released, but if a child function is defined inside, the `scope` attribute of the child function will store a pointer to the active object of the parent function. The active object will not be terminated because it is still referenced by the child function, and the variables of the parent function have not been eliminated. The value of the variable out is still "out".
/ / you can verify var abc = out (); alert (abc ()) with the following code
Results:
Application of closure
One of the most common places for closures is to retain the variables of the parent function, as illustrated in the above example
Another application of closures is to simulate block-level scopes and private variables, which is because the application function has its own scope. It has an anonymous function on the external report of the variable that does not want to be a public variable and executes it immediately.
(function () {/ / this is block-level scope}) (); summary
Although the closure seems simple, it reveals the mechanism of the js domain chain, and the closure has many application scenarios, if you do not understand it, it will only become more and more confused.
