Deeply parse the closure mechanism of JavaScript and parse the javascript Mechanism

Deeply parse the closure mechanism of JavaScript and parse the javascript Mechanism

JavaScript variables can be local variables or global variables.
The closure can be used for private variables.
Global Variables
Function access is a variable defined inside a function, such:
Instance

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

A function can also access variables defined outside the function, such:
Instance

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

In the next instance, a is a global variable.
On the web page, the global variable belongs to the window object.
Global variables can be applied to all scripts on the page.
In the first instance, a is a local variable.
Local variables can only be used to define their functions. Other functions or script code are not available.
Global and local variables, even with the same name, are two different variables. Modifying one of them does not affect the other.
Note
If the var keyword is not used, the variable declaration is a global variable, even if it is defined in the function.

Variable Lifecycle
The scope of global variables is global, that is, global variables are everywhere in the entire JavaScript program.
Variables declared within a function only work within the function. These variables are local variables, and the scope is local. The function parameters are also local and only take effect within the function.
Counter dilemma
Imagine if you want to count some numbers and the counter is available in all functions.
You can use global variables to set counter increments:
Instance

Var counter = 0; function add () {counter + = 1;} add (); // the counter is now 3

The counter value changes when the add () function is executed.
But the problem is that any script on the page can change the counter even if the add () function is not called.
If I declare a counter in the function, the counter value cannot be modified if the function is not called:
Instance

Function add () {var counter = 0; counter + = 1;} add (); // the intention is to output 3, but this is counterproductive, all outputs are 1!

The above Code cannot be output correctly. Every time I call the add () function, the counter is set to 1.
JavaScript embedded functions can solve this problem.
JavaScript embedded Functions
All functions can access global variables.
In fact, in JavaScript, all functions can access the scope at the previous layer.
JavaScript supports nested functions. Nested functions can access function variables at the previous layer.
In this instance, the nested Function plus () can access the counter variable of the parent function:
Instance

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

If we can access the plus () function externally, this will solve the counter dilemma.
We also need to ensure that counter = 0 is executed only once.
We need closures.
JavaScript Closure
Do you still remember function Self-calls? What will this function do?
Instance

Var add = (function () {var counter = 0; return function () {return counter + = 1 ;}}) (); add (); add (); // the counter is 3.

Instance resolution
The variable add specifies the returned word value of the function Self-call.
The self-called function is executed only once. Set the counter to 0. And return the function expression.
The add variable can be used as a function. The great part is that it can access the counters in the upper scope of the function.
This is called the JavaScript closure. It makes it possible for a function to have private variables.
The counter is protected by the scope of anonymous functions and can only be modified using the add method.

Note
Closure is a function that can access the variables in the scope of the previous function, even if the previous function has been disabled.