Compilation of javaScript interview questions --- What is a closure, what is an immediate execution function, and what is its function? Briefly talk about the usage scenarios of closures

What is a closure, briefly talk about the usage scenarios of closures

 

To understand closures, you must first understand the special variable scope of Javascript

The scope of variables is nothing more than two types: global variables and local variables .

The special features of Javascript language:

 1. Global variables can be read directly inside the function.

 2. It is naturally impossible to read the local variables in the function outside the function.

3. When declaring variables inside a function, be sure to use the var command. If you don't use it, you actually declare a global variable!

 

For various reasons, we sometimes need to get local variables in a function. However, as mentioned earlier, this is impossible under normal circumstances and can only be achieved through workarounds.

That is to define another function inside the function.

　function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}

　　}

In the above code, function f2 is included in function f1. At this time, all local variables inside f1 are visible to f2. But the reverse is not possible, the local variables inside f2 are not visible to f1. This is the unique "chain scope" structure of the Javascript language. The child object will look up all the variables of the parent object level by level. Therefore, all variables of the parent object are visible to the child object, and vice versa.

Since f2 can read the local variables in f1, as long as f2 is used as the return value, can we read its internal variables outside f1?

　function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

The f2 function in the code in the previous section is a closure.

Since in the Javascript language, only the sub-functions inside the function can read the local variables, the closure can be simply understood as "a function defined inside a function".

So, in essence, a closure is a bridge that connects the inside of the function with the outside of the function.

 

Usage scenarios of closures:

1.setTimeout 

The first function passed by the native setTimeout cannot take parameters, and the effect of passing parameters can be achieved through closures.

2. Callback  

Define the behavior, and then associate it with a user event (click or keypress). The code is usually bound to the event as a callback (a function that is called when the event is triggered).

3. Function stabilization

The callback will be executed n seconds after the event is triggered, and if it is triggered again within these n seconds, the timing will be restarted. The key to implementation lies in setTimeOutthis function. Since a variable is also needed to save the timing, consider maintaining global purity, which can be implemented with the help of closures.

4. Encapsulate private variables

 

What is an immediate execution function?

Declaring a function and calling this anonymous function immediately is called an immediate execution function; it can also be said that an immediate execution function is a kind of syntax, allowing your function to be executed immediately after it is defined;

(function(){
//code
}())

(function (){
//code
})()

What does it do

1. No need to name the function to avoid polluting global variables
2. A separate scope is formed inside the immediate execution function, which can encapsulate some private variables that cannot be read from the outside
3. Package variable

The immediate execution of the function will form a separate scope, we can encapsulate some temporary variables or local variables to avoid polluting global variables