JavaScript closure
May 06, 2021 JavaScript
Table of contents
JavaScript closure
JavaScript variables can be local or global.
Private variables can be used to close.
Global variable
A function can access variables defined within a function, such as:
Functions can also access variables defined outside the function, such as:
In the next instance, a is a global variable.
Global variables in web pages belong to the window object.
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 the inside of its function. No other function or script code is available.
Global and local variables are two different variables, even if they have the same name. M odifying one does not affect the value of the other.
|
A variable declaration is a global variable if you do not use the var keyword, even if it is defined within a function. |
|---|
Tip: Practice how to define the global variables of JavaScript functions in the JavaScript programming battle!
The life cycle of the variable
The scope of a global variable is global, i.e. it is everywhere in the JavaScript program.
Variables declared inside a function only work inside the function. These variables are local, the scope is local, and the parameters of the function are local and only work inside 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, and the function sets the counter increment:
function add() {
counter += 1;
}
add();
add();
add();
The counter is now 3
Try it out . . .
The counter value changes when the add() function is executed.
But when the problem comes, 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, I would not be able to modify the value of the counter without calling the function:
var counter = 0;
counter += 1;
}
add();
add();
add();
The intention is to output 3, but contrary to expectations, the output is 1!
Try it out . . .
The above code will not output correctly, and every time I call the add() function, the counter is set to 1.
JavaScript inline functions can solve this problem.
JavaScript inline functions
All functions have access to global variables.
In fact, in JavaScript, all functions have access to the scopes at the top of them.
JavaScript supports nested functions. N ested functions have access to function variables at the next level.
In this example, the embedded function plus() can access the counter variable of the parent function:
var counter = 0;
function plus() {counter += 1; }
plus();
return counter;
}
Try it out . . .
If we can access the plus() function externally, we can solve the counter's dilemma.
We also need to make sure that the counter is executed only once.
We need a closure.
JavaScript closure
Remember the function self-calling? What does the function do?
var counter = 0;
return function () {return counter += 1; }
})();
add();
add();
add();
The counter is 3
Try it out . . .
Instance resolution
The variable add specifies the return word value of the function's self-call.
The self-calling function is executed only once. S et the counter to 0. and returns a function expression.
The add variable can be used as a function. T he great part is that it can access counters at the upper scope of the function.
This is called JavaScript closure. It makes it possible for a function to have private variables.
Counters are protected by the scope of anonymous functions and can only be modified by the add method.
|
A closure is a function that can access variables in the scope of the last layer of functions, even if the last layer of functions is closed. |
|---|
Related article references
JavaScript Learning Notes: Learn Javascript Closures