JavaScript closure details

Preface:

In the JavaScript part, closures are very important, so we will summarize the relevant knowledge of closures today. First of all, before understanding closures, we must first know the relevant knowledge of scope. The previous blog post about scope has explained it, so I will not repeat it here. Next, let’s take a look at what is a closure?

1. What is a closure?

closure is a function that has access to variables in the scope of another function. ----- JavaScript Advanced Programming

Simply put, a closure is a function whose characteristics are: a scope can access the local variables inside another function.

Here is a simple example:

For example, we now have a function, and we define a local variable inside it. If other scopes can access this local variable, a closure is generated. So we define another function inside this function to see if the function scope inside can access the local variables in the outer function.

 function f1(){
            var num = 10;
            function f2(){
                console.log(num);
            }
            f2();
        }
        f1();

The printed result is:

It can be found that the value is printed out successfully, so a closure is generated.
But some readers may have questions: The f2 function itself is inside the f1 function, and it can use the variables of the parent function. Then we access the variable in the scope outside the f1 function and see what the result is.

We change the call of f2 function to the return value of f1 function, and then call f1 function outside the function, as follows:

 function f1(){
            var num = 10;
            function f2(){
                console.log(num);
            }
           return f2()
        }
        var f = f1();
        f();

At this point, it is equivalent to the scope outside f1 accessing the variables of its internal function. The print result is:

It can be found that the local variables inside it can also be used here, and closures are generated.

So we can conclude that:

Closure: A scope can access local variables within another function.

2. The role of closure

We know that the local variables defined inside a function can only be used inside the function, and they will be destroyed when we finish using them. However, with closures, this local variable will be used outside the function and will not be destroyed until its external caller has finished calling it. Therefore, the role of closures is to extend the scope of the variable.

This is the end of this article about JavaScript closures. For more information about JavaScript closures, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!