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

This article introduces the relevant knowledge of "the function and application scenario of Javascript closure". In the operation of actual cases, many people will encounter such a dilemma, 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!

What is a closure?

The "official" explanation is that the so-called "closure" refers to an expression (usually a function) that has many variables and the environment that binds them, so these variables are also part of the expression.

I believe that few people can directly understand this sentence, because his description is too academic. I want to tell you what a closure is by how to create a closure in Javascript, because it is very difficult to skip the closure creation process and directly understand the definition of the closure. Look at the following code:

Function a () {var iTuno; function b () {alert (+ + I);} return b;} var c = a (); c ()

This code has two characteristics:

1. Function b is nested inside function a

2. Function a returns function b.

So after executing var Centra (), the variable c actually points to the function b, and then executing c () will pop up a window showing the value of I (* times 1). This code actually creates a closure. Why? Because the variable c outside function a refers to function b within function a, that is to say:

When the inner function b of function an is referenced by a variable outside function a, a closure is created.

I guess you still don't understand closures, because you don't know what closures do, so let's continue to explore.

Second, what is the function of closures?

In short, the function of closures is that after an is executed and returned, the closure ensures that Javascript's garbage collection mechanism GC will not recover the resources occupied by a, because the execution of a's internal function b depends on variables in a. This is a very straightforward description of the role of closures, unprofessional and unrigorous, but that's what it probably means. Understanding closures requires a step-by-step process.

In the above example, due to the existence of the closure, the I in an always exists after the function a returns, so that every time c () is executed, I is the value of alert I since the addition of 1.

So let's imagine another situation, if a doesn't return function b, the situation is completely different. Because after the execution of a, b is not returned to the outside world of a, but is referenced by a, and at this time a will only be referenced by b, so the functions an and b refer to each other but are not disturbed by the outside world (referenced by the outside world), and the functions an and b will be recycled by GC. (the garbage collection mechanism of Javascript will be described in more detail later.)

III. The microscopic world in the closure

If we want to have a deeper understanding of closures and the relationship between function an and nested function b, we need to introduce several other concepts: function execution environment (excution context), active object (call object), scope (scope), scope chain (scope chain). Take the process of function a from definition to execution as an example to illustrate these concepts.

1. When defining function a, the js interpreter sets the scope chain (scope chain) of function a to the "environment" in which an is defined. If an is a global function, there are only window objects in the scope chain.

2. When the function an is executed, a will enter the corresponding execution environment (excution context).

3. In the process of creating the execution environment, you will first add a scope attribute for a, that is, the scope of a, whose value is the scope chain in step 1. That is, the domain chain of a.scope=a.

The execution environment then creates an active object (call object). The active object is also an object with properties, but it does not have a prototype and cannot be accessed directly through JavaScript code. After creating the active object, add the active object to the top of a's scope chain. At this time, the scope chain of a contains two objects: the active object and the window object.

5. The next step is to add an arguments property to the active object, which holds the parameters passed when calling function a.

6. * add all the formal parameters of function an and references to the internal function b to the active object of a. In this step, the definition of function b is completed, so as in step 3, the scope chain of function b is set to the environment in which b is defined, that is, the scope of a.

At this point, the whole function an is completed from definition to execution. At this time, a returns a reference to function b to c, and the scope chain of function b contains a reference to the active object of function a, that is, b can access all variables and functions defined in a. Function b is referenced by c, and function b depends on function a, so function a will not be reclaimed by GC after it is returned.

When the function b is executed, it will be the same as the above steps. Therefore, the scope chain of b at execution time contains three objects: the active object of b, the active object of a, and the window object, as shown in the following figure:

As shown in the figure, when accessing a variable in function b, the search order is to search for its own active object first, and return if it exists. If it does not exist, it will continue to search for function a until it is found. If it cannot be found on the entire scope chain, undefined is returned. If there is a prototype prototype object in function b, then look for its own prototype object after finding its own active object, and then continue to find it. This is the variable lookup mechanism in Javascript.

IV. Application scenarios of closures

1. Protect the variables in the function. Taking the initial example, I in function a can only be accessed by function b and cannot be accessed by other means, thus protecting the security of I.

2. Maintain a variable in memory. As in the previous example, I in function an is always in memory because of the closure, so I is incremented by 1 every time c () is executed.

The above two points are the most basic application scenarios of closures, which are the source of many classic cases.

5. Garbage collection mechanism of Javascript

In Javascript, if an object is no longer referenced, the object is reclaimed by GC. If two objects refer to each other and are no longer referenced by the third party, the two objects that reference each other will also be recycled. Because function an is referenced by b, b is referenced by c outside a, which is why function an is not recycled after execution.

This is the end of the content of "the role and application scenarios of Javascript closures". 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.