Understanding and using JavaScript closures

JavaScript closures play an important role in global variables and local variables. This article will explain their related knowledge.

JavaScript variables can be local variables or global variables.

Private variables can use closures.

Global variables

The function can access variables defined inside the function, such as:

Instance

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

The function can also access variables defined outside the function , such as:

Instance

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

In the latter instance, 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.

If you do not use the var keyword when declaring a variable, 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, global variables are everywhere in the entire JavaScript program.

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

var counter = 0; 
function add() {
   return counter += 1;}
 add();add();add(); 
// 计数器现在为 3

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

Example

function add() {
    var counter = 0;    return counter += 1;}
 add();add();add(); 
// 本意是想输出 3, 但事与愿违，输出的都是 1 !

The above code will not output correctly every time I call 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:

Example

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

If we can access the plus() function externally, like this This will solve the counter dilemma.

We also need to ensure that counter = 0 is only executed once.

We need closures.

JavaScript Closure

Remember the function calling itself? What does this function do?

Example

var add = (function () {
    var counter = 0;    return function () {return counter += 1;}})(); 
add();add();add(); 
// 计数器为 3

Have a general understanding of the closure knowledge of global variables and local variables. For more learning materials, please pay attention to the PHP Chinese website.

Related recommendations:

Related explanations about JavaScript form validation

Knowledge related to JavaScript pop-up events

JavaScript Date (date) related knowledge and usage

The above is the detailed content of Understanding and using JavaScript closures. For more information, please follow other related articles on the PHP Chinese website!