A brief discussion on scope and closure issues in JavaScript_Basic knowledge

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 internal local variables cannot be accessed outside the function:

function test() {
var a = 0; // 局部变量
b = 1; // 全局变量
}
a = ?, b = ? // a为undefined，b为1

Local variables with the same name will override global variables, but essentially they are two independent variables. Changes in one will not affect the other:

a = 5; // 函数外a的值为5
function test() {
var a = 4; // 函数内a的值为4
}();
a = ? // 函数外a的值仍为5，不受函数影响

Generally speaking, after the function ends, all references to the internal variables of the function end, the local variables within the function 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(); // 返回值为64， 内部变量b为63
a(); // 返回值为63， 内部变量b为62

When an internal function is used as the return value, because the reference to the internal variable does not end after the function ends, the local variables of the function cannot be recycled, and the execution environment of the function is retained, thus forming a closure effect, which can be passed Reference access to internal variables that should be recycled.
Closure also makes the local variables of the function "private" variables, which can only be accessed through the returned inner function and cannot be changed by any other means.
Therefore, closures can be used to maintain local variables and protect variables.
Without closure:

var a = []; // 假设a中包含5个元素
for (var i = 0, m = a.length; i < m; i++) {
a[i].onclick = function(e) {
return 'No. ' + i;
};
}
// 点击任何一个元素，返回值都是“No. 5”，因为i最后的值为5
使用闭包的情况：
function test(i) {
return function(e) {
return 'No. ' + i;
};
}
var a = []; // 假设a中包含5个元素
for (var i = 0, m = a.length; i < m; i++) {
a[i].onclick = test(i);
}
// 使用闭包维持局部变量，点击元素返回No. 0 ~ No. 4

While closures bring convenience, they also bring some disadvantages:
1. The complexity of the program increases and it becomes more difficult to understand
2. Interfering with normal garbage collection, complex closures may also cause memory to fail to be recycled and crash
3. Huge closures are often accompanied by performance problems
Therefore, closures should be compact and compact, rather than large and complex, and large-scale use of closures should be avoided. 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.