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

This article mainly explains "the detailed explanation of the knowledge points of JS closure", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn the "detailed explanation of JS closures".

What is a closure?

To learn a strange concept, we must first understand what it is. That is, what is the closure? If you want to fully master closures, you must have a clear understanding of function scope, memory recovery mechanism, and scope inheritance. Let's talk about these concepts briefly.

1. Function scope

The concept of scope, if described vividly, can be regarded as a closed space, which is only allowed to do some operations in this closed space, and this closed space is also called private scope. In JS, the execution of a function creates a private scope in memory-a closed space.

For example, defining a variable in a function can only be used in the private scope of the function (that is, an enclosed space). As long as you go beyond this scope, the variable cannot be found.

And after the function is executed, the private scope (the enclosed space) is destroyed. There is a situation in which it will not be destroyed, and that is the "closure", which will be discussed later.

two。 Memory recovery mechanism

The memory recovery mechanism is the memory that is not in use, and our system automatically reclaims the memory to clear the space for other programs to use. What are the rules for recycling?

The internal function refers to the variables of the external function, and even though the external function is executed, the scope will not be destroyed. This creates a private scope that is not destroyed.

A variable or object is referenced, so it is not released when it is recycled, because being referenced represents being used, and the recycler does not recycle the variable or object that is being referenced.

3. Scope inheritance

The so-called scope inheritance is like a son inheriting his father's property. For example, the fawn has a large box as a parent scope, and then a small box is placed in the big box as a child scope. We stipulate that the things in the big box can be obtained in the small box, and the fact that the big box cannot get what is in the small box is called scope inheritance.

In JS, the truth is the same, in a function we declare another function, the internal function can access the external function scope variables, while the external function can not get the internal function scope variables.

Well, after understanding the above concepts, what is a closure is no longer a problem for you.

In vernacular, what is a closure is to define another function in a function. This internal function always maintains access to the scope of the external function (the small box can always have access to the big box).

Function execution, to form a private scope, to protect the private variables from external interference, in addition to protecting private variables, but also can store some content, this pattern is called closure.

Animation implementation:

What is the function of closures?

You must still be a little confused about closures, it doesn't matter, we will continue to understand in depth. What is the main function of closures? Why use closures?

Through the above explanation of the closure, the external function return internal function, but still can have access to the scope of the external function, because the external reference is always maintained. This allows us to find its usefulness.

Isn't there a scope that can't be destroyed? We can use it to save some content, and we can use it to protect some private variables. We conclude that closures have two functions, namely, protection and preservation.

Third, the application scenario of closure

Now that we know that closures are used for preservation and protection, where are they used in real projects?

1. Protective effect

During team development, each developer puts his or her own code in a private scope to prevent conflicting variable names; the methods that need to be provided to others are exposed globally through return or window.xxx.

This protection mechanism is also used in the source code of jQuery.

two。 Preservation effect

The solution to the tab closure. We often use tabs in web pages, but there is a problem with the index, which is actually the same as the classic interview questions below.

IV. Classic closed-face test questions

What is the problem with the index caused by the circular binding event? How to solve this problem?

Run the program at this time, and all you will get is the value of len.

Why is there such a problem and how can we solve it?

The reason is simple: all event bindings are asynchronous, and when the click event is triggered and the method is executed, the loop ends long ago.

Let's talk a little bit more about what is synchronous and what is asynchronous?

Synchronization: the current task in JS is not completed, none of the following tasks will be performed, and the following tasks will not be performed until the current task is completely completed.

Async: the current task in JS is not completed and needs to be completed later, at which point we can continue with the following tasks.

Solution:

When the click event is executed, it looks for the value of I in the private scope. If there is no I in the private scope, it goes back to the global scope to look for it. At this time, the I in the global scope has been changed. So, to create a private scoped I.

Method one, the way of closure. Closures finally come in handy to hold private variables.

But closure solution has both advantages and disadvantages. The advantage is that it is solved by creating a private scope (closure). After a few cycles, several private scopes (closures) are created, and then each private scope has a private variable I, and the stored value is the value of the loop.

The disadvantage is to generate multiple private scopes (heap memory) that are not destroyed, which has a certain impact on performance.

Method two, use custom properties. We add an index property to each object and OK it.

The ultimate solution, which is the knowledge of ES6, because there is no concept of block scope in JS before, but in ES6, the variables declared by Let can better solve the above problems.

At this point, I believe you have a deeper understanding of the "detailed knowledge of JS closures". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.