Deep analysis of JavaScript closure mechanism _ Basics

A JavaScript variable can be either a local variable or a global variable.
Private variables can be used in closures.
Global Variables
A function can access a variable that is defined internally by a function, such as:
Instance

function MyFunction () {
  var a = 4;
  Return a * A;
}

A function can also access variables defined outside of a function, such as:
Instance

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

In one subsequent instance, a is a global variable.
Global variables belong to window objects in Web pages.
Global variables can be applied to all scripts on the page.
In the first instance, a is a local variable.
A local variable can only be used to define its internal function. is not available for other functions or scripting code.
Global and local variables, even if they have the same name, are two different variables. Modifying one of these will not affect the value of the other.
Note
A variable declaration is a global variable if the var keyword is not used, even though it is defined within the function.

Variable life cycle
Global variables are scoped globally, that is, global variables are everywhere in the entire JavaScript program.
A variable declared inside a function only works inside the function. These variables are local variables, the scope is local, and the function's parameters are local, only within the function.
counter Dilemma
Imagine if you want to count some values, and the counter is available in all functions.
You can use global variables, function set counter increments:
Instance

var counter = 0;

function Add () {
  counter + + 1;
}

Add ();
Add ();
Add ();

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 within a function, the value of the counter cannot be modified without calling the function:
Instance

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

Add ();
Add ();
Add ();

The original intention is to output 3, but it backfired, the output is 1!

The above code will not output correctly, and each time I call the Add () function, the counter will be set to 1.
JavaScript inline functions can solve the problem.
JavaScript Inline Functions
All functions have access to global variables.
In fact, in JavaScript, all functions have access to the scope of their previous layer.
JavaScript supports nested functions. A nested function can access a function variable on the previous level.
In this instance, the inline 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's dilemma.
We also need to ensure that counter = 0 is executed only once.
We need to close the bag.
JavaScript Closures
Do you remember the function call itself? What does the function do?
Instance

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

Add ();
Add ();
Add ();

Counter is 3

Instance resolution
Variable add specifies the return word value of the function's self invocation.
The self invocation function executes only once. Set counter to 0. and returns the expression of the function.
The add variable can be used as a function. The great part is that it can access the counter on the function's upper-level scope.
This is called JavaScript closure. It makes it possible for a function to have a private variable.
Counters are protected by the scope of an anonymous function and can only be modified by the Add method.

Note
A closure is a function that accesses a variable in the scope of a function in the previous layer, even if the previous function has been closed.