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

This article introduces the relevant knowledge of "how to understand javascript closures". 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!

The first echelon understands

Personally, I think the important reason why closures are difficult to understand is that in the process of understanding, many concepts are subconsciously associated with the noun intensity of the concept itself to figure out the meaning of the concept. If your understanding seems not so related to the literal meaning of the noun itself, you will have a great sense of skepticism in your heart. I can't believe whether my understanding is correct. Even if it's right. So in the immediate process of the meaning of a concept itself, a step is to find some inexplicable way to connect your understanding of the concept with the noun itself.

The term closure sounds like no one knows what it is talking about, which in itself causes great confusion in understanding the concept, because an easy-to-understand pronoun can well explain 50% of a concept. For example, a variable is the literal amount of change, conditional statements, branch statements are easy to understand what the concept is. So first of all, we need to conceptually establish a primary perceptual understanding of closures. The following sentence is a simple and easy-to-understand explanation I have seen.

Functions that return functions

A closure is a function, but this function is the return value of another function.

Yes, that's what it seems to be on the surface. For example, write a closure:

Function fn1 () {var temp = 10; return function () {console.log (+ + temp);}} fn1 () ()

The function from return in the above example is a very simple closure. On the surface, it is almost a function returned from the function with the definition statement above.

The echelon's understanding that this is almost enough, although incorrect, although very rough, but to form a perceptual understanding should be enough, summarize a * echelon's understanding, what is a closure:

A function

A function that is return by other functions.

At this time, there should be such a concept in our understanding, that is, closures should be similar to a concept we already understand, that is, functions. Yes, we can understand it this way from the very beginning. Closures are a function, a special function, just like the method in js is also a function.

The second echelon understands

With the knowledge of the echelon, we slowly modify the understanding of closures in our brains. Some people understand that a closure is a function nested in a function, and an internal function can access the data of an external function. It is wrong to understand it in this way. Look at the following code:

Function fn1 () {var temp = 10; function fn2 () {console.log (+ + temp);} fn2 ()} fn1 ()

But at this time, no matter how many times fn1 () prints, it will never change, so this is not a closure. It is only when you return an internal function that a closure is formed. The closure is the function of return. This inner function can close-over the variables of the external function until the inner function (closure) ends.

At this time, let's look at the code in the echelon.

Function fn1 () {var temp = 10; return function () {console.log (+ + temp);}} vat func1 = fn1 (); / / func1 is a closure (that is, the function returned by fn1). Func1 (); / / print 11 func1 (); / / print 12

At this time, func1 is a global variable, but when printing, it accesses the local variable temp of fn1, and when the fn1 () function is executed, the variable of temp is not garbage collected and still exists in memory. This is the characteristic of closures. That is, the variable of the internal function close-over external function that we just talked about. Understanding this sentence can be well associated with the word closure to understand the concept of closure.

Summarize the understanding of the second echelon:

A closure is a function with a specific function. It is a function that can read internal variables of other functions.

Because in javascript, if you want to read variables within a function (often called local variables), only the subfunctions of the function can access it.

Then with the cross-understanding of these two concepts, we can simply understand that a closure is a function defined inside a function and can access the local variables in the function.

Without a closure, we cannot access the local variables inside the function. With the closure, we can access the local variables inside the function, which is equivalent to the closure solving a problem. That is to build a bridge between the inside and outside of the function.

The third echelon understands

At this point we can look at the official definition of closures: closures are functions that have access to independent (free) variables (variables are used locally but defined in a closed scope). In other words, these functions can "remember" the environment in which it was created.

Let's look at another definition: so what is a closure? There are two definitions. In computer science (not mathematics), a closure is a function or a reference to a function, as well as the environmental information they reference (like a table, this table stores every variable referenced in this function that is not declared in the function).

There is a concept in both definitions, "closed scope" in the * *, and "referenced environmental information" in the second. Here we can all temporarily understand using the variables of the close-over external function above.

That is, closures always have two parts:

Part of it is a function.

The other part is "wrapped" by this function (some understand as "taken away", or close-over lives) some environmental information (it can be understood that environmental information is a variable), but is not declared in this function (called free variables or outer variables).

There is another definition that is not so silly: closures allow you to encapsulate some behavior (the function is the behavior) and pass it around like any other object (the function is first-class function), but in any case, it still retains access to the original context (it also has access to outer variables).

At this time, the understanding is more abstract, because it not only involves the concept of scope, but also a closed scope. In fact, there is a passage in parentheses above (like a table that stores every variable referenced in this function that is not declared in the function), which defines the scope of the "closure" of the closure.

The fourth echelon understands

By accessing external variables, a closure can keep alive these variables. In the case of internal and external functions, external functions can create local variables and eventually exit; however, if any one or more internal functions do not exit after it exits, then the internal function maintains the local data of the external function.

That's all for "how to understand 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.