In-depth understanding of Javascript closure (closure)

Recently a lot of online access

Javascript closure (closure) relevant information

, Written mostly very academic and professional. For starters, let alone understand closures , and even the narrative are difficult to understand. The purpose of this writing is to use the most popular characters reveal Javascript closures true face.

First, what is closure?

"Official" explanation is: the so-called "closure", refers to a bound with many variables and environmental variables expressions (usually a function), these variables are thus part of the expression.

I believe very few people can directly read this sentence, because he is too academic described. I want to use

How to create a closure in Javascript

To tell you what's closure because skip the creation process of closure of the closure of the definition is very difficult to directly understand.

Look at the following code:

function a(){
 var i=0;
 function b(){
 alert(++i);
 }
 return b;
}
var c = a();
c();


This code has two characteristics:

1, b function is nested inside a function;
2, the function returns a function b.

After executing the so var c = a (), the variable c is in fact points to a function of b, c and then execute () pops up a window value of i (a first time). In fact, this code creates a closure, and why? Since the variable external function references a c b the function of a function a, that is to say:

When a function is an internal function of a variable b is referenced outside the functions a, a closure is created.

I bet you still do not understand closures, closures because you do not know what effect, let us continue to explore.

Second, the closures have any effect?

Briefly, the closure action is performed in a complete and returns, so that the closure of the garbage collection GC Javascript not withdraw a resource occupied, because the execution of a internal function of the need to rely on a b variables . This is a very straightforward description of the effect of the closure, not professional nor rigorous, but this probably means, need to understand the process of gradual closure.
In the above example, since the presence of such closure after returning a function, a i is always present, so that each execution C (), i is 1 alert an increase since the value of i.

So let's imagine another scenario, if a return is not a function b, the situation is completely different. Because after the implementation of a, b is not a return to the outside world, only to be referenced by a, but this time it will only be a reference to b, so the function of a and b refer to each other but do not be left alone (referenced outside) , a function of a and b will be recovered GC. (Garbage collection mechanism on Javascript will be described in detail later)

Third, the microscopic world inside the closure

If you want more in-depth understanding of the relationship between closures and nested function and a function b, we need to introduce several other concepts: execution of the function environment (excution context), active objects (call object), scope (scope), the scope chain (scope chain). To define a function from a process carried out example to explain these concepts.

1, the time when a defined function, js interpreter will be a function of the scope chain (scope chain)

When you define a set to a host of "environment", if A is a global function, the scope chain is only window object.

2, when a function is executed, will enter a corresponding execution environment (context excution) .

3, the process of creating the execution environment, a first added to a scope attribute, i.e., of a scope , which scope chain for the values in the step 1. I.e. a.scope = a scope chain.

4, and then the execution environment creates an active object (Object Call) . Active object also has a property of an object, but it does not have direct access to the prototype JavaScript code and can not pass. After creating an active object, the active object is added to the top of a scope chain. At this time, a scope chain contains two objects: a is

Active object and window objects

.

5, the next step is to add a property arguments on the active object, which holds the parameters passed to the function call a.

6, and finally the internal parameter functions and all functions of a, b on a reference is also added to the active object. In this step, the complete definition of the function of b, as in step 3 thus, function b scope chain is set to b in the environment is defined, i.e., a scope.

This, the entire function is defined from a step to be executed is completed. At this time, a function that returns a reference to the C b, b scope and function chain contains a reference to the function of the active object, i.e. b can access all variables and functions defined in a. B function is referenced c, b and a function dependent function a, so the function does a return after being

GC recovery

.

When the function b will also perform the same steps as above. Thus, when executed b scope chain comprises three objects: b active objects, active objects A and window object, as shown below:

11_110522_scopechain.jpg


As shown, when accessing a variable in the function b, the search order is to search the active object itself, if it returns, if the active object will continue a search function does not exist, in order to find, until you find. If the entire scope chain can not be found, it returns undefined. If the function b exists prototype prototype object , then after you find the first active object itself to find its own prototype object, and then continue the search. This is the Javascript variables in lookup mechanism .

Fourth, the closure of the application scenario

1, the protective function of the safety variable. At the beginning of the example, for example, function in a function b i can access only, and can not be accessed by other means, thus protecting the security of i.

2, maintain a variable in memory. As in the previous still, since the closure, a function of i always present in memory, and therefore each execution C (), are added from 1 to i.

Closure is two points above the basic scenario, many classic case stems from this.

Five, Javascript garbage collection mechanism

in Javascript, if an object is no longer referenced, the object will be recovered GC. If two objects refer to each other, and are no longer referenced by a third party, then the two objects reference each other will be recovered. Because a function is referenced b, b has been cited outside a c, which is the reason why the function can not be executed after a recovery.

Reproduced in: https: //www.cnblogs.com/zhangchenliang/archive/2011/05/15/2046718.html

Guess you like

Origin blog.csdn.net/weixin_34319640/article/details/93496096