JavaScript scopes and closures

JavaScript scopes are defined by functions, and different functions have relatively independent scopes. The function can declare and access global variables, or declare local variables (using the var keyword, the function parameter is also a local variable), but the function cannot access internal local variables externally:
Function test (){
Var a = 0; // local variable
B = 1; // global variable
}
A = ?, B =? // A is undefined and B is 1
Local variables with the same name will overwrite global variables, but they are essentially two independent variables. Changes in one side will not affect the other side:
A = 5; // the value of a outside the function is 5.
Function test (){
Var a = 4; // The value of a in the function is 4.
}();
A =? // The value of a outside the function is still 5, not affected by the function
Generally, when the function ends, all references to the internal variables of the function end, the local variables in the function are recycled, and the execution environment of the function is cleared. However, if an internal function is returned as a function, the following changes:
Function test (I ){
Var B = I * I;
Return function (){
Return B --;
};
}
Var a = test (8 );
A (); // The returned value is 64, and the internal variable B is 63.
A (); // The returned value is 63, and the internal variable B is 62.
When an internal function is used as the return value, because the reference of internal variables is not completed after the function is completed, the local variables of the function cannot be recycled, and the execution environment of the function is retained, therefore, the closure effect is formed. You can use this reference to access the internal variables that should be recycled.
The closure also makes the local variables of the function a "private" variable and can only be accessed by the returned internal function, but cannot be changed by any other means.
Therefore, closures can be used to maintain local variables and protect variables.
If no closure is used:
Var a = []; // assume that a contains five elements.
For (var I = 0, m = a. length; I <m; I ++ ){
A [I]. onclick = function (e ){
Return 'no. '+ I;
};
}
// Click any element and the returned value is "No. 5", because the final value of I is 5.
Closure:
Function test (I ){
Return function (e ){
Return 'no. '+ I;
};
}
Var a = []; // assume that a contains five elements.
For (var I = 0, m = a. length; I <m; I ++ ){
A [I]. onclick = test (I );
}
// Use the closure to maintain the local variable. Click the element to return No. 0 ~ No. 4
Closure brings convenience, but also brings some drawbacks:
1. Increased program complexity and difficulty in understanding
2. Interference with normal garbage collection. Complicated closures may also cause memory unrecoverable and crash
3. Huge closures are often accompanied by performance problems
Therefore, the closure should be simplified and small, rather than large and complex. At the same time, it should be avoided to use the closure on a large scale. The appearance of closures is a language bug, but it is retained because of its unique functions. It is an auxiliary means rather than a main function.