Understanding JavaScript closure function

Directory variable scope The Concept of Closure Use of closures Disadvantages of closures Finally, the advantages and disadvantages of 1 lower closure are summarized Summarize

Variable scope

To understand JavaScript closures, we must first understand the variable scope of JavaScript.

There are two types of scope for variables: global and local (global and local)

In JavaScript, global variables can be read directly inside the function.

var n=10
function fn(){
	alert(n)
}
fn()      //10

Variables inside the function cannot be read outside the function.

function fn(){
	var n=10;
}
fn()
alert(n)   //n is not defined     The outside of the function cannot be read into the inside of the function n

Note: When using var to declare a variable inside a function, this variable is a local variable. If var is not used, this variable is a global variable.

For example:

function fn(){
	n=10;
}
fn()
alert(n)   //10

In addition, the parameters of the function are local and only work inside the function.

Under normal circumstances, we can't get the local variables inside the function, only the workaround can-declare another function inside the function.

function f1(){
	var n=10;
	function f2(){
		alert(n)
	}
}

f2 function can get all the local variables in f1 function, but f1 function can't get the local variables in f2 function-the unique "chain scope" structure of JavaScript language. (That is, the child object will look up for all the variables of the parent object level by level), so all the variables of the parent object are visible to the child object.

The f2 function can get the local variables of the parent function f1, so if the f2 () function is returned, the variables inside the f1 () function can be accessed outside the function f1.

For example:

function f1(){
	var n=10;
	function f2(){
		alert(n)
	}
	return f2()
}
f1()           // Page pop-up 10

The f2 () function in the example is a closure function.

The Concept of Closure

Because of scope, we can't access the variables defined in the function outside of the function, but we have this requirement, so the concept of closure appears.

A closure is a function that has access to variables in the scope of another function.

In the above example, the inner function f2 is a closure function.

In essence, a closure is a bridge connecting the inside and outside of a function.

Closure is a mechanism to protect private variables, which forms a private scope when a function is executed, and protects private variables from external interference.

Use of closures

(1) You can read the variables inside the parent scope function;

(2) Keep the values of variables in memory at all times (make local variables become global variables) and not be cleared by garbage collection mechanism.

Disadvantages of closures

Because closures will save all variables in functions to memory, garbage collection mechanism does not clean up, and memory consumption is very large, so closures cannot be abused, otherwise memory leaks may occur.

Additional:

What is a memory leak?

Programs need memory to run. As long as memory is required, the operating system must supply memory.
A memory leak occurs when a few code variables in an application no longer require memory, but are not reclaimed by the operating system or the available memory pool.

That is, when a piece of memory is no longer needed, there is still a memory leak in this piece of memory

Solve the problem of memory leak caused by closure:

Delete all unused local variables before exiting the function.

For example, setting the value of the current variable to 'null' will automatically recycle these variables with a value of 'null' when the garbage collection mechanism starts.

Finally, the advantages and disadvantages of 1 lower closure are summarized

Benefits

Protect the variables in the function, realize encapsulation, and prevent the variables from flowing into other environments to cause naming conflicts

(2) Maintain a variable in memory, which can be used as cache (but it is also a disadvantage and consumes memory)

Anonymous self-executing functions can reduce memory consumption

Disadvantages

(1) One of the above points has been reflected, that is, the referenced private variable cannot be destroyed, which increases memory consumption and causes memory leakage. The solution is to manually assign it to null after using the variable;

Secondly, because closures involve cross-domain access, it will lead to performance loss. We can reduce the impact on execution speed by storing cross-scope variables in local variables and then accessing local variables directly

Summarize