I have been in contact with JavaScript for a long time, and every time I understand closures, I am looking for work on the front-end of the web recently, so I need to consolidate the foundation.
This article refers to joy_lee 's blog closure based on her blog and strives to explain my understanding in the form of comments. If there is any inappropriateness, criticism and correction are welcome.
In Advanced Programming, this is said: When other functions are defined inside a function, a closure is created. The closure has permission to access all variables contained within the function.
(How do you understand this sentence? According to this sentence, a closure is a nested function! A nested function can of course access the variables of the function containing it, and there is no problem.)
Generally speaking, internal functions can access variables at the previous level or even global levels. So some people understand this: through closures, external access to variables within the local function can be achieved.
(If we simply divide the scope into one level, suppose the global scope as the first level, where the defined function body internal scope is the second level, and the defined function body internal scope is nested within the second level scope as the third level, etc. In traditional sense, the first level cannot access the second level variable (this variable is called local variable), and the second level cannot access the third level,..., and vice versa, which is the scope chain. The scope cannot be found in the scope of this level, and then searched to the previous level until the first level global. The closure mechanism can refer to the variables in the second level scope through the third level scope in the first level scope, and the method is to return the function reference with the third level scope to the first level scope in the second level scope. This reference is the key, because of the existence of this reference, the relevant third scope and second scope both become the context of this reference operation, forcing the garbage collection mechanism GC to not recycle the resources occupied by this chain. If there is no such reference, the resource will be recycled after the function is run. My doubts are also here. Does the closure refer to the nested function in the function or the nested function referenced by the first level? Or is it all? Or is the closure not a nested function but a nested function when the nested function is referenced by the first level scope? )
function a(){ var i=0; function b(){ alert(++i); } return b; } var c = a(); c();That is, the function of the closure is that after a is executed and returned, the closure makes the Javascript garbage collection mechanism GC not recover the resources occupied by a, because the execution of a internal function b of a needs to rely on the variables in a.
Due to the existence of the closure, after function a returns, i in a always exists. In this way, every time c() is executed, i is the value of i alerted after adding 1.
Then, if a does not return function b, the situation is completely different. Because after a is executed, b is not returned to the outside world of a, but is only referenced by a, and at this time a will only be referenced by b, so functions a and b are referenced by each other but are not disturbed by the outside world (referred by the outside world), functions a and b will be recycled by GC.
In fact, it is the closure that extends the life cycle of the variable. Usually, the scope of a function, that is, variables, will be destroyed after the function is executed, but when the function returns a closure, as long as the closure is not released, the entire scope chain will occupy memory. (Closures extend the life cycle of a variable, which refers to the case of being referenced at the first level. But without this reference, can closures still be called closures?)
Speaking of scope chain: that is, the function's own scope, the function's scope of the previous layer... and the global scope. When accessing a variable, if you don’t have it, look up layer by layer until the whole world. If you don’t have it yet, you will report an error.
(I really want to complain that the scope chain of the closure is curved.)
PS: Some netizens recommended another article to analyze the concept of javascript closures . Is it authoritative? Finally, there is a clear concept:
Having said so much, what exactly is a closure? Let’s summarize it below:
Closure is a concept that describes a phenomenon in which memory resides after function execution is released. As long as you grasp this core concept, closures are not difficult to understand.
The above article lets you understand closures in one sentence (simple and easy to understand) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.