Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to understand the JavaScript closure function". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Variable scope

To understand JavaScript closures, you need to understand the variable scope of JavaScript.

There are two scopes of variables: global and local (global and local)

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

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

The variables inside the function cannot be read outside the function.

Function fn () {var noun10;} fn () alert (n) / / the n inside the function cannot be read outside the function.

Note: when you declare a variable inside the function using var, the variable is a local variable, and if you don't use var, then it is a global variable.

For example:

Function fn () {nasty 10;} fn () alert (n) / / 10

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

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

Function F1 () {var nasty 10; function f2 () {alert (n)}}

The f2 function can get all the local variables in the F1 function, but the F1 function can not get the local variables inside the f2 function-the "chain scope" structure peculiar to JavaScript language. (that is, the child object will look up all the variables of the parent object level by level), so all 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 nasty 10; function f2 () {alert (n)} return f2 ()} F1 () / / Page pops up 10

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

The concept of closure

Because of the scope, we cannot access the variables defined in the function outside the function, but sometimes 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 that connects the interior of a function to the outside of a function.

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

The purpose of closures

(1) you can read the variables inside the parent scope function.

(2) keep the value of the variable in memory (let the local variable become a global variable) and not be cleared by the garbage collection mechanism.

The shortcomings of closures

Because the closure will save all the variables in the function to memory, the garbage collection mechanism does not clean up, and the memory consumption is very high, so the closure should not be abused, otherwise it may lead to memory leakage.

Add:

What is a memory leak?

The program needs memory to run. As long as memory is required, the operating system must provide memory.

A memory leak occurs when some code variables in the application no longer need memory but are not reclaimed by the operating system or the available memory pool.

That is, when a block of memory is no longer needed, it still exists-a memory leak.

Resolve memory leaks caused by closures:

Delete all unused local variables before exiting the function.

For example: set the value of the current variable to 'null',. When the garbage collection mechanism is started, these variables with the value of' null' are automatically reclaimed.

Finally, summarize the advantages and disadvantages of closures.

Benefits

① protects variables in functions, implements encapsulation, and prevents naming conflicts when variables flow into other environments.

② maintains a variable in memory that can be cached (but overuse is also a disadvantage and consumes memory)

③ anonymous self-executing functions can reduce memory consumption

Disadvantages

One of the points in ① is that referenced private variables cannot be destroyed, which increases memory consumption and causes memory leaks. The solution is to manually assign the variable to null after using it.

② 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 directly accessing local variables.

"how to understand the JavaScript closure function" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.