JavaScript closure and javascript Closure

JavaScript closure and javascript Closure
JavaScript variables can be local variables or global variables.

The closure can be used for private variables.

Global Variables

A function can access variables defined inside a function, such:

Instance

Function myFunction (){
Var a = 4;
Return a *;
}

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

Instance

Var a = 4;
Function myFunction (){
Return a *;
}

In the next instance,AIsGlobalVariable.

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,AIsLocalVariable.

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.

	If the variable declaration is not usedVarKeyword, it 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 ();
Add ();
Add ();

// The counter is currently 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 ();
Add ();
Add ();

// The intention is to output 3, but it is counterproductive. The output is 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.

Embedded functions in this instancePlus ()You can accessCounterVariable:

Instance

Function add (){
Var counter = 0;
Function plus () {counter + = 1 ;}
Plus ();
Return counter;
}

If we can accessPlus ()Function to solve the counter dilemma.

We also need to ensure thatCounter = 0Run 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 ();
Add ();

// The counter is 3.

Instance resolution

VariableAddSpecifies the returned word value for 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 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.

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