The closure concept of JS

Source: Internet
Author: User
Tags variable scope

The scope of a variable
To understand closures, you must understand the special variable scope of JavaScript.
The scope of a variable is nothing more than two kinds: global variables and local variables.
What makes JavaScript so special is that it can read global variables directly inside the function.

JS Code
var n=999;
Function F1 () {
alert (n);
}
F1 (); 999
On the other hand, local variables within the function cannot be read naturally outside the function.
JS Code
Function F1 () {
var n=999;
}
alert (n); Error
Here is a place to pay attention, the function of the internal declaration of variables, it is necessary to use Var. If not, you're actually declaring a global variable!
JS Code
Function F1 () {
n=999;
}
F1 ();
alert (n); 999
--------------------------------------------------------------------------------------------------------
Second, how to read the local variables from the outside?
For various reasons, we sometimes want to get local variables within the function. But, as already said before, under normal circumstances, this is impossible, only through the process of adaptation can be achieved.
That is, in the inside of the function, define a function.
JS Code
Function F1 () {
n=999;
function F2 () {
alert (n); 999
}
}
In the above code, the function F2 is included inside the function F1, and all local variables inside the F1 are visible to the F2. But in turn can not, F2 internal local variables, to F1 is not see. This is the "chain-scoped" layout (chain scope), which is unique to JavaScript.
The child object looks up the variables for all the parent objects first-level. Therefore, all the variables of the parent object are visible to the child object, and vice versa.
Since F2 can read the local variables in the F1, we can not read its internal variables outside the F1 as long as the F2 is the return value!

JS Code
Function F1 () {
n=999;
function F2 () {
alert (n);
}
return F2;
}
var result=f1 ();
Result (); 999
--------------------------------------------------------------------------------------------------------
Three, the concept of closure
The F2 function in the previous section of the code is the closure.
The definition of "closure" (closure) in various professional literature is very abstract and humiliating to understand. My understanding is that closures are functions that may read other function internal variables.
Because in JavaScript, only sub-functions within the function can read local variables, so that the closure is simply understood as "a function defined inside a function".
So, in essence, a closure is a bridge that connects the inside of the function to the outside of the function.
--------------------------------------------------------------------------------------------------------b
Iv. use of closures
Closures can be used in many places. Its maximum usefulness is two, one of the previously mentioned variables can be read inside the function, and the other is to let the values of these variables always stand in memory.
How to understand this sentence? Take a look at the following code.

JS Code
Function F1 () {
var n=999;
Nadd=function () {n+=1}
function F2 () {
alert (n);
}
return F2;
}
var result=f1 ();
Result (); 999
Nadd ();
Result (); 1000
In this code, result is actually the closure F2 function. It runs altogether two times, the first value is 999, the second value is 1000. This means that the local variable n in the function F1 is always stored in memory and is not actively purged after the F1 call.
Why is that? The reason is that F1 is the parent function of F2, and F2 is assigned to a global variable, which causes F2 to always be in memory, and F2 is attached to F1, and F1 is always in memory, and will not be taken over by the garbage receiving takeover mechanism (garbage collection) after the call is stopped.
Another noteworthy part of this code is that the "nadd=function () {n+=1}" line, first in front of Nadd, does not have the var keyword applied, so that Nadd is a global variable, not a local variable. Second, the value of Nadd is an anonymous function (anonymous functions), and this
The anonymous function itself is also a closure, so nadd is equivalent to a setter that can manipulate local variables inside the function outside of the function.
--------------------------------------------------------------------------------------------------------
Five, the application of the closure of the attention point
1) Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so do not abuse closures, otherwise it will cause the performance of the Web page, in IE may lead to memory leaks. The workaround is to remove all local variables that are not applied before exiting the function.
2) The closure changes the value of the inner variable of the parent function outside the parent function. So, if you apply the parent function as a hard image (object), make the closure a common method (public method), and count the internal variable as its private property (private value), then be wary of it.
Change the value of the inner variable of the parent function.

JS's closure concept

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.