In-depth understanding of JavaScript prototypes and Closures (12)--closures

The official definition of a closure is a function that has permission to access variables in another function scope.

Closures are used in two ways: functions as return values, functions as arguments

First: function as return value

In the above code, the bar function is assigned to the variable F1 as the return value of the FN function, so executing F1 () is executing the bar function, and when the bar function is executed, the variable max is taken from the FN scope.

Second: The function is passed as a parameter

This is typically a self-executing anonymous function

In the above code, the FN function is assigned as a parameter to the F parameter in the self-executing anonymous function, so the execution of F (15) is the execution of FN (15), and when the FN (15) is executed, the value of Max takes 10 of the global scope.

In addition, the other function of the closure is to allow the variable to reside in memory, in general the function execution, the function of the execution environment should be destroyed, but due to the existence of the closure, the function of the execution environment is not immediately destroyed.

In the preceding code, the first step is to generate the global execution environment before the code executes and assign a value to the variable, at which time the global execution environment is active.

Second, execute the 17th line of code, the FN function as a variable assigned to the F1 variable, called FN (), resulting in the FN function execution environment, when the FN execution environment is active

In the third step, after executing 17 lines of code, it is supposed to destroy the execution environment of the FN function, but not at this time, because when the FN function is executed, a function is returned. The special thing about functions is that you can create a separate scope.

And in the bar function body, there is also a free variable to refer to the values in the FN scope. Therefore, the FN execution environment cannot be destroyed, and Max cannot find the value after it is destroyed.

Fourth step, execute 18 lines of code, at this time the global execution environment and the FN execution environment are active, the execution of 18 lines of code, the global execution environment in the max variable is assigned a value of 100

Fifth step, execute 20 lines of code, because the FN function in 17 lines of code is assigned to the F1 variable, so executing the F1 function is the execution of the FN function, that is, the bar function is active.

When the bar function is executed, Max is a free variable and needs to be found in the scope where the bar function was created, so the FN scope, the value of Max, is 10.

As you can see from here, the Create bar function is created when the FN function is executed. FN is already executed, but the execution environment for FN still exists in memory, so when you execute bar (15), Max can find out and if the FN execution environment is destroyed, Max will not be able to find it.

Conclusion: Using closures can increase memory consumption.

If used improperly, it can also cause a memory leak problem.

In-depth understanding of JavaScript prototypes and Closures (12)--closures