Detailed explanation of JavaScript closure issues

Closures are one of the traditional features of pure functional programming languages. By considering closures as an integral part of the core language constructs, the JavaScript language demonstrates its close ties to functional programming languages. Closures are becoming increasingly popular in mainstream JavaScript libraries and high-level production code because they can simplify complex operations.

1. Variable scope

Before introducing closures, let's first understand the variable scope of JavaScript. There are two types of variable scopes: global variables and local variables.

1. Global variables

var n = 999; //global variable function f1() {
        a = 100; //Here a is also a global variable alert(n);
    }
    console.log(a); //100

Here, the value of the variable can be directly obtained inside and outside the function - global variable

2. Local variables

//local variables function f2() {
        var b = 22;
    }
    console.log(b); //Error

Here, the value defined inside the function cannot be directly obtained from outside the function - local variables

At this point, what should we do when we want to get the value of a local variable from the outside?
Please continue reading:

2. How to get local variables from outside

Let's look at an example:

var outer = 'Outer'; // Global variable var copy; 
function outerFn(){ // Global function var inner = 'Inner'; // This variable has only function scope and cannot be accessed from outside function innerFn(){ // innerFn() in outerFn() 
 // Both global context and surrounding context can be used here,
 // So you can access outer and inner 
 console.log(outer); 
 console.log(inner); 
 } 
 copy = innerFn; // Save a reference to innerFn() // Because copy is declared in the global context, it can be used externally} 
outerFn(); 
copy(); // innerFn() cannot be called directly, but can be called through variables declared in the global scope

Let’s analyze the example above. The variable outer is accessible inside innerFn() because it is in the global context.

After outerFn() is executed, innerFn() is executed by copying a reference to the function into a global variable
This is achieved in copy. When the function innerFn() is called using the variable copy, it is no longer in the scope of outerFn(). So shouldn't the following code fail?
console.log(inner);
The value of the variable inner should be undefined, right? However, the output of the above code snippet is:
"Outer"
"Inner"

This is the chain scope structure of JavaScript. The child object will search up one level at a time for the variables of all parent objects. Therefore, all variables of the parent object are visible to the child object, but not vice versa.

In this way, we can get the local variables inside the function.

3. The concept of closure

The copy() function in the code block above is a closure. In my understanding, a closure is a function that can read the variables inside the function.
In JavaScript, local variables can be obtained through sub-functions inside a function, so closures can be understood as functions defined inside functions.
It can be understood as a bridge connecting the inside and outside of a function.

4. The role of closure

In my opinion, the role of closures is mainly reflected in two aspects:

1. You can read variables inside the function

This effect has been clearly demonstrated in the previous code block.

2. The value of local variables can be kept in memory

As we all know, local variables will only occupy temporary storage space in memory when they are used, and the space will be automatically released after the function ends. The emergence of closures allows local variables to be stored in memory consistently like global variables.

        function c1() {
            var z = 9999;
            nAdd = function() {
                z += 1;
            }

            function c2() {
                console.log(z);
            }
            return c2;
        }
        var result = c1();
        result(); //9999
        nAdd();
        result(); //10000

In the above code, c1() is executed once, at which time z=9999; nAdd() is executed once again to make z+1; and c1() is executed once more to output the value of z at this time, z=10000. This means that the value of z is always stored in the memory and is not automatically cleared after the first call to c1().

At this point, you should pay attention that the use of closures will consume a lot of memory, so don't abuse closures. Before exiting the function, delete all unused local variables.

This is the end of this article on the detailed explanation of JavaScript closure issues. For more relevant JavaScript closure issues, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!