For beginners, understanding JavaScript closures (closure) is more difficult, and the purpose of this article is to use the most popular text to uncover the true nature of javascript closures, so that beginners understand easier.
One, what is closure?
The "official" explanation is that a closure is an expression (usually a function) that has many variables and an environment that binds them, and therefore these variables are also part of the expression. I believe very few people can read this sentence directly, because he describes too academic.
In fact, this phrase is in layman's terms: all function in JavaScript is a closure. In general, however, nested function results in a more powerful closure, which is what we call "closures" most of the time. Look at the following code:
Copy Code code as follows:
function A () {
var i = 0;
Function B () {
alert (++i);
}
return b;
}
var C = A ();
C ();
This code has two features:
1. function b is nested inside function A.
2. Function a returns function B.
So after the Var c=a () is executed, the variable C actually points to the variable i in the function b,b, then executes C () and pops up a window to display the value of I (for the first time 1). This piece of code actually creates a closure, why? Because the variable C outside function A refers to function B within function A, that is to say:
When the internal function B of function A is referenced by a variable outside of function A, we create a "closure" that we normally call "closures". Let's talk a little more thoroughly. A "closure" is a method function in the constructor body that defines another function as the target object, and the method function of the object in turn refers to the temporary variable in the outer outer function body.
This makes it possible to indirectly maintain the value of the temporary variables used by the original constructor body as long as the target object retains its method throughout its lifetime. Although the first constructor call has ended, the name of the temporary variable disappears, but the value of the variable is always referenced within the target object's method, and the value can only be accessed through this method.
Even if you call the same constructor again, but only new objects and methods are generated, the new temporary variable only corresponds to the new value, and the last time the call was separate. To get a deeper understanding of closures, let's continue to explore the effects and effects of closures.
what is the function and effect of closure?
In short, the function of a closure is that after a is executed and returned, the closure makes the JavaScript garbage collection mechanism GC not reclaim the resource occupied by a, because the execution of the internal function B of a relies on the variables in a. This is a very straightforward description of the closure function, unprofessional and not rigorous, but the general meaning is that, understand the closure requires a step-by-step process.
In the above example, because the closure makes function a return, I always exist in a, so each C (), I is the value of alert out I after 1. So let's imagine the other case, if a returns a function B, the situation is completely different.
Since A is executed, B is not returned to the outside of a, but is referenced by a, while a is only referenced by B, so functions A and B refer to each other without being disturbed by the outside world (referenced by the outside world), and functions A and B are recycled by GC. (The garbage collection mechanism for JavaScript is described later in detail)
the microscopic world of closure
To get a deeper understanding of the relationship between closures and function A and nested function B, we need to introduce several other concepts: the execution Environment for functions (excution context), active objects (call object), scope (scope), scope chain. Use function A as an example to illustrate these concepts from the process of definition to execution.
1. When a function A is defined, the JS interpreter sets the scope chain (scope chain) of function A to the "environment" where a is defined, and if a is a global function, only the window object in scope chain.
2. When the function A is executed, a will enter the corresponding execution environment (excution context).
3. In creating an execution environment, you first add a scope property, the scope of a, whose value is the scope chain in step 1th. That is, the scope chain of the a.scope=a.
4. The execution environment then creates an active object (call object). The active object is also an object that has attributes, but it does not have a prototype and is not directly accessible through JavaScript code. After the active object is created, the active object is added to the top of the scope chain of a. At this point A's scope chain contains two objects: A's active object and a Window object.
5. The next step is to add a arguments property to the active object that holds the arguments passed when the function A is invoked.
6. Finally, the reference to the parameters of all function A and the internal function B is added to the active object of a. In this step, the definition of function B is complete, so as in step 3rd, the scope chain of function B is set to the environment defined by B, that is, the scope of a.
In this, the entire function A is completed from the definition to the execution step. At this point a returns the reference of function B to C, and the scope chain of function B contains a reference to the active object of function A, which means that B can access all the variables and functions defined in a. Function B is referenced by C, function B is dependent on function A, so function A is not reclaimed by GC after it returns.
When function B is executed it will be similar to the above steps. Thus, the scope chain of B at execution time contains 3 objects: B's Active object, A's active object and Window object, and when a variable is accessed in function B, the search order is:
1. Search for its own active object, if present, return if it does not exist, and then search until you find the active object that will continue searching for function A.
2. If a prototype prototype object exists in function B, it searches for its own prototype object after it finds its own active object, and then continues to find it. This is the variable lookup mechanism in JavaScript.
3. Returns undefined if the entire scope chain is not found.
In this paragraph, two important words are mentioned: the definition and execution of functions. It is mentioned that the scope of the function is defined at the time of defining the function, rather than being determined at the time of execution (see steps 1 and 3). Use a piece of code to illustrate the problem:
Copy Code code as follows:
function f (x) {
var g = function () {return x;}
return g;
}
var h = f (1);
Alert (H ());
The variable h in this code points to the anonymous function in F (returned by G).
Assuming that the scope of function h is determined by execution alert (h ()), then H's scope chain is the active object->window object->alert the active object of H.
It is assumed that the scope of the function h is defined, that is, the anonymous function that H points to defines the scope. Then, at the time of execution, H's scope chain is: H's active object->f the active object->window object.
If the first hypothesis is established, the output value is undefined; if the second assumption is true, the output value is 1. The results of the operation prove that the 2nd hypothesis is correct, stating that the scope of the function is indeed defined when defining the function.
Four, closures the application scene
1. Protect the variables within the function security. Take the first example, in function A, I have only function B to access, and I cannot access it through other means, thus protecting the security of I.
2. Maintain a variable in memory. As in the previous example, because of the closure, function A has always been in memory, so every time C () is executed, I will add 1 to my self.
3. Through the protection of the security variables to achieve JS private property and private methods (can not be external access) Recommended reading: Http://javascript.crockford.com/private.html. Private properties and methods cannot be accessed outside of constructor:
Copy Code code as follows:
Function Constructor (...) {
var that = this;
var membername = value;
function MemberName (...) {...}
}
The above 3 points are the most basic application scenarios for closures, and many classic cases derive from this.
five, JavaScript garbage collection mechanism
In JavaScript, if an object is no longer referenced, the object is reclaimed by GC. If two objects are referenced to each other and are no longer referenced by the 3rd, then the two referenced objects are also reclaimed. Because function A is referenced by B, B is referenced by C outside of a, which is why function A is not recycled after it executes.
Six, the conclusion
Understanding JavaScript closures is the way to advanced JS programmers, understanding their interpretation and operational mechanisms to write more secure and elegant code.
