JavaScript closures
JavaScript variables can be local variables or global variables.
Private variables can use closure.
Global variables
Functions can access variables defined within the function, such as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">查看</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Run the program and try it
The function can also access variables defined outside the function, such as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>Run the program and try it
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.
Tips: If a variable is declared without using 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, in the entire JavaScript program, global variables are everywhere All are there.
The variables declared inside the 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 if you want to count some values, and the counter is available in all functions.
You can use global variables and functions to set the counter increment:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Run the program to try it
The counter value changes when the add() function is executed.
But here comes the problem, 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:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Run the program to try it
The above code will not output correctly. Every time I call the add() function, the counter will be set to 1.
JavaScript built-in functions can solve this problem.
JavaScript embedded functions
All functions can access global variables.
In fact, in JavaScript, all functions can access the scope above them.
JavaScript supports nested functions. Nested functions can access the function variables of the upper level.
In this example, the embedded function plus() can access the counter variable of the parent function:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</htmlRun the program and try it
If we can access it externally plus() function, which can solve the counter dilemma.
We also need to ensure that counter = 0 is only executed once.
We need closures.
JavaScript Closures
Remember the function calling itself? What does this function do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>Run the program and try it
Example analysis
Variable add specifies the return word of the function self-call value.
The self-calling function is only executed once. Set counter to 0. and returns the function expression.
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 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.
Tip: A closure is a function that can access variables in the scope of the upper-level function, even if the upper-level function has been closed.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
