Analysis and explanation of JavaScript scope and closure

[Introduction] The scope of JavaScript is bounded by functions, and different functions have relatively independent scopes. Global variables can be declared and accessed inside the function, and local variables can also be declared (using the var keyword, the parameters of the function are also local variables), but the internal local variables cannot be accessed outside the function: functio

The scope of JavaScript is a function bounds, different functions have relatively independent scopes. Global variables can be declared and accessed inside the function, and local variables can also be declared (using the var keyword, the parameters of the function are also local variables), but internal local variables cannot be accessed outside the function:
function test() {
var a = 0; // Local variable
b = 1; // Global variable
}
a = ?, b = ? // a is undefined, b is 1
Local variables with the same name will overwrite global variables, but essentially they are two independent variables, and changes to one of them will not Affects the other party:
a = 5; // The value of a outside the function is 5
function test() {
var a = 4; // The value of a inside the function is 4
}();
a = ? //The value of a outside the function is still 5 and is not affected by the function
Generally speaking, after the function ends, all references to the internal variables of the function end, and the function The local variables inside will be recycled and the execution environment of the function will be cleared. However, if the internal function is used as the return result of the function, the situation will change:
function test(i) {
var b = i * i;
return function() {
return b--;
};
}
var a = test(8);
a(); / / The return value is 64, the internal variable b is 63
a(); // The return value is 63, the internal variable b is 62
When the internal function is used as the return value, because after the function ends The reference of the variable has not ended, so the local variables of the function cannot be recycled, and the execution environment of the function is retained, thus forming a closure effect. Internal variables that should be recycled can be accessed through this reference.
Closure also makes the local variables of the function "private" variables, which can only be accessed through the returned internal function and cannot be changed by any other means.
Therefore, closures can be used to maintain local variables and protect variables.
Situation without closure:
var a = []; // Assume a contains 5 elements
for (var i = 0, m = a.length; i < m; i++) {
a[i].onclick = function(e) {
return 'No. ' + i;
};
}
// Click on any For an element, the return value is "No. 5", because the final value of i is 5
Using closure:
function test(i) {
return function(e) {
return 'No. ' + i;
};
}
var a = []; // Assume a contains 5 elements
for (var i = 0, m = a.length; i < m; i++) {
a[i].onclick = test(i);
}
// Use closures to maintain local variables, click The element returns No. 0 ~ No. 4
While closure brings convenience, it also brings some disadvantages:
1. The complexity of the program increases, making it more difficult to understand.
2. Interference with normal operation Garbage collection, complex closures may also lead to memory failure and crash
3. Huge closures are often accompanied by performance problems
Therefore, closures should be streamlined and small, rather than large and complex, and large and complex closures should be avoided. Scale using closures. The emergence of closures is itself a bug in the language, but it remains because of its unique functions. It is a supplementary means, not the main function.

The above is the detailed content of Analysis and explanation of JavaScript scope and closure. For more information, please follow other related articles on the PHP Chinese website!