An in-depth analysis of JavaScript's closure mechanism_Basic knowledge

JavaScript variables can be local variables or global variables.
Closures can be used for private variables.
Global variables
Functions can access variables defined within the function, such as:
Example

function myFunction() {
  var a = 4;
  return a * a;
}

Functions can also access variables defined outside the function, such as:
Example

var a = 4;
function myFunction() {
  return a * a;
}

In the latter example, a is a global variable.
Global variables in web pages belong to the window object.
Global variables apply to all scripts on the page.
In the first instance, a is a local variable.
Local variables can only be used inside the function in which they are defined. Not available for other functions or script code.
Even if global and local variables have the same name, they are two different variables. Modifying one of them will not affect the value of the other.
Note
If a variable is declared without the var keyword, it is a global variable, even if it is defined within a function.

Variable life cycle
The scope of global variables is global, that is, global variables are everywhere in the entire JavaScript program.
Variables declared inside a function only work inside the function. These variables are local variables and their scope is local; the parameters of the function are also local and only work inside the function.
Counter Dilemma
Imagine you want to count some values, and the counter is available in all functions.
You can use global variables, functions to set the counter to increment:
Example

var counter = 0;

function add() {
  counter += 1;
}

add();
add();
add();

// 计数器现在为 3

The counter value changes when the add() function is executed.
But here's the problem, any script on the page can change the counter, even if the add() function is not called.
If I declare a counter inside a function, the value of the counter cannot be modified without calling the function:
Example

function add() {
  var counter = 0;
  counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !

The above code will not output correctly, every time I call the add() function, the counter will be set to 1.
JavaScript inline functions can solve this problem.
JavaScript built-in functions
All functions have access to global variables.
In fact, in JavaScript, all functions have access to the scope above them.
JavaScript supports nested functions. Nested functions can access the function variables of the upper level.
In this example, the inline function plus() can access the counter variable of the parent function:
Example

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}

If we could access the plus() function externally, this would solve the counter dilemma.
We also need to make sure that counter = 0 is only executed once.
We need closures.
JavaScript Closure
Remember the function calling itself? What does this function do?
Example

var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

Example analysis
The variable add specifies the return word value of the function calling itself.
Self-calling functions are executed only once. Set counter to 0. and returns the function expression.
The add variable can be used as a function. The cool part is that it gives access to counters from the scope above the function.
This is called a JavaScript closure. It makes it possible for functions to have private variables.
The counter is protected by the scope of the anonymous function and can only be modified through the add method.

Note
A closure is a function that can access variables in the scope of the previous function, even if the previous function has been closed.