var foo = "Hello";var c =(function a() {function b(){var bar = " World";alert(foo + bar);return bar;}return b;})()();alert(foo + c);This example pops up hello world twice;
1. What is a closure?
The "official" explanation is: the so-called "closure" refers to an expression (usually a function) that has many variables and an environment bound to these variables, so these variables are also part of the expression.
I believe few people can directly understand this sentence because he described it too academically. I want to use how to create a closure in Javascript to tell you what a closure is, because it is very difficult to directly understand the definition of a closure by skipping the closure creation process. 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. Function b is nested inside function a;
2. Function a returns function b.
In this way, after executing var c=a(), the variable c actually points to function b. After executing c(), a window will pop up to display the value of i (the first time is 1). This code actually creates a closure. Why? Because the variable c outside function a refers to the function b inside function a, that is,:
When the internal function b of function a is referenced by a variable outside function a, a closure is created.
I guess you still don’t understand closures because you don’t know what closures have. Let’s continue to explore below.
2. What is the function of closures?
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 recover the resources occupied by a, because the execution of a internal function b of a needs to rely on the variables in a. This is a very straightforward description of the role of closures, which is not professional or rigorous, but it roughly means that it is. Understanding closures requires a gradual process.
In the above example, after the function a is returned, i in a always exists, so every time c() is executed, i is the value of i alerted after adding 1.
Then let's imagine another situation. If a returns not function b, the situation is completely different. Because after a is executed, b is not returned to the outside world of a, but is only referenced by a, and at this time a will only be referenced by b, so functions a and b are referenced to each other but are not disturbed by the outside world (referred by the outside world), functions a and b will be recycled by GC. (The garbage collection mechanism of Javascript will be introduced in detail later)
3. The microscopic world in the closure
If we want to have a deeper understanding of the relationship between closures and function a and nested function b, we need to introduce several other concepts: the function's execution environment (excution context), the active object (call object), the scope (scope), and the scope chain. Take the process of function a from definition to execution as an example to illustrate these concepts.
1. When defining function a, the js interpreter will set the scope chain of function a to the "environment" where a is located when defining a. If a is a global function, there are only window objects in the scope chain.
2. When function a is executed, a will enter the corresponding execution environment (excution context).
3. In the process of creating an execution environment, a will first add a scope attribute, that is, the scope of a, and its value is the scope chain in step 1. That is, the scope chain of a.scope=a.
4. The execution environment will then create an active object (call object). The active object is also an object with attributes, but it does not have a prototype and cannot be directly accessed through JavaScript code. After creating the active object, add the active object to the top of the scope chain of a. At this time, the scope chain of a contains two objects: the active object of a and the window object.
5. The next step is to add an arguments attribute to the active object, which saves the parameters passed when calling function a.
6. Finally, add all the formal parameters of function a and the references to the internal function b to the active object of a. In this step, the definition of function b is completed, so as in step 3, the scope chain of function b is set to the environment defined by b, that is, the scope of a.
At this point, the entire function a is completed from definition to execution. At this time a returns a reference to function b to c, and the scope chain of function b contains a reference to the active object of function a, that is, b can access all variables and functions defined in a. Function b is referenced by c, and function b relies on function a, so function a will not be recycled by GC after it is returned.
When function b is executed, it will also be the same as above. Therefore, the scope chain of b during execution contains 3 objects: the active object of b, the active object of a and the window object, as shown in the figure below:
As shown in the figure, when accessing a variable in function b, the search order is to first search for its own active object, and if it exists, it will return. If it does not exist, it will continue to search for the active object of function a, and search in turn until it is found. If it cannot be found on the entire scope chain, undefined is returned. If there is a prototype prototype object for function b, then after searching for its own active object, first look for its own prototype object, and then continue to search. This is the variable search mechanism in Javascript.
4. Application scenarios of closures
1. Protect the security of variables in the function. Taking the first example as an example, in function a, i can only be accessed by function b, but cannot be accessed through other channels, thus protecting the security of i.
2. Maintain a variable in memory. Still as before, due to the closure, i in function a always exists in memory, so every time c() is executed, i will be added 1.
The above two points are the most basic application scenarios for closures, and many classic cases originate from this.
5. Javascript's garbage collection mechanism
In Javascript, if an object is no longer referenced, then the object will be recycled by GC. If two objects are referenced to each other and are no longer referenced by the third person, then the two objects referenced to each other will be recycled. Because function a is referenced by b, b is referenced by c outside a, which is why function a will not be recycled after execution.
The above article comprehensively understands the closure mechanism is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.