In-depth understanding of Javascript closures

Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic and professional. For beginners, let alone understand the closure, and even the narrative are hard to understand. The purpose of this writing is the most popular words reveal the true face of the closure Javascript.

I. What is closure?

"Official" explanation: the so-called "closure" refers to a binding with many variables and the environment of these variables the expression (usually a function), and thus these variables are part of the expression.

I believe very few people can directly read this sentence, because he describes is too academic. How I would like to use Javascript to create a closure to tell you what a closure, because closure of the creation process to skip directly to understand the definition of closure is very difficult. See the following code:

function a(){
var i=0;
function b(){
return b;
var c = a();

This code has two features:

1, the function b nested within the function a;

2, the function returns a function of b.

So that implementation of the complete var c = a (), the variable c is actually pointing to a function b, then implementation of the c () a window will pop up after the show i values (the first is 1). This code actually creates a closure, and why? As a function outside of a variable c refers to the function function b, that is:

When the function of a function within a function b is a variable outside the reference time, it creates a closure.

I guess you must still do not understand the closure, because you do not know what effect the closure, let's continue to explore.

Second, what effect the closure?

In short, the role of closure is to implement a complete and return after the closure makes the garbage collection GC Javascript is not occupied by a resource recovery as a function of b, the internal implementation of the variables need to rely on a . This is a very straightforward closure description of the role, not the professional is not rigorous, but it probably means that, step by step to understand the process of closure.

In the above example, because of the existence of closure makes the function of a return, a of i always exists, so that each time the implementation of c (), i is increased by 1 since the value of i after the alert out.

So let's imagine another situation, if a return is not a function of b, the situation is completely different. After the implementation because a, b have not been returned to a of the outside world, just being a quoted, at which point a reference will only be b, so the function a and b refer to each other but not outsiders disturbed (by external reference) , the function will be a and b GC collection. (On the Javascript garbage collection mechanism will be detailed later)

Third, within the closure of the microscopic world

If you want a more in-depth understanding of the closure and the function a and b of the relationship between the nested function, we need to introduce several other concepts: the function of the execution environment (excution context), active objects (call object), scope (scope), the role of domain chain (scope chain). To function, a process from definition to implementation example to explain these concepts.

1, a time when the definition of the function, js interpreter will be a function of the scope chain (scope chain) is set to a definition of a time where the "environment", if a is a global function, then only the window object scope chain .

2, when the function is a time of execution, a will enter the appropriate execution environment (excution context).

3, execution environment in the process of creating the first to add a scope for a property, that is, a scope, its value as in step 1 on the scope chain. That a.scope = a scope chain.

4, then the execution environment creates an active object (call object). Active object is an object has a property, but it does not have the prototype and JavaScript code can not be accessed directly. After you create the active object to active object to a top of the scope chain. At this point a scope chain consists of two objects: a of the active object and the window object.

5, the next step is to add an object in the event arguments property, it preserves the function is called when a parameter passed.

6, the final form of all the functions a, b parameters and internal functions are added to a reference to the activities of the object. In this step, the complete definition of the function b, so as to step 3, the function b of the scope chain is set to b is defined by the environment, that is a scope.

This, the function a step from definition to implementation is complete. At this point a reference back to the function b to c, then the function b of the scope chain consists of the activities of the function a reference to an object, that b can have access to a defined all variables and functions. Function b is c reference, the function b also rely on a function of a, therefore the function a GC in return will not be recycled.

When the function b when the implementation will be the same as the above steps. Therefore, the implementation b's scope chain consists of three objects: b of the active object, a the active object and the window object, as shown:

As shown, when the function b in the time to access a variable, the search order is to first search its own active object, if it returns, if there is no search function will continue the activities of a target, and then click find, but until then. If the scope chain can not be found, it returns undefined. If the function prototype prototype object b exists, then find their own activities completed after the first object to find its own prototype object, and then continue to search. This is the Javascript variables in search mechanism.

4, closure scenarios

1, to protect the security of variables within the function. To the beginning of the case, for example, the function a function b in i only be able to access, but can not be accessed by other means, thus protecting the i's security.

2, in memory to maintain a variable. Remains as a precedent, since the closure, the function a in the i's have been in memory, so each time the implementation of c (), will add 1 to i own.

These two points is the closure of the most basic scenarios, many of the classic cases are derived from this.

5, Javascript garbage collection mechanism

In Javascript, if an object is no longer referenced, then the object will be GC recovery. If two objects reference each other, but who no longer referenced by 3, then the two objects reference each other will be recycled. Because the function a reference to be b, b has to be a reference outside of c, which is why the function of a recovery after the execution will not be the reason.
标签: garbage collection, variables, expression, closure, variable c, true face, internal implementation, narrative, resource recovery
分类: Web
时间: 2010-05-29


  1. Understanding of JavaScript closures

    Understanding of JavaScript closures To become advanced JavaScript programmers, it is necessary to understand ...
  2. In-depth understanding of Javascript closures (closure)

    I. What is closure? "Official" explanation: the so-called "closure" refers to a binding wi ...
  3. Depth understanding of Javascript closure (closure)

    Recently, online access to a lot of Javascript closure (closure) of relevant information and writing are very ...
  4. In-depth understanding of Javascript closures (Reprinted)

    Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic ...
  5. Transfer: in-depth understanding of javascript closures

    Closure of the microscopic world If you want a more in-depth understanding of the closure and the functions a ...
  6. [Reprinted] in-depth understanding of JavaScript closure (closure)

    Reprinted] [ depth understanding of JavaScript closure (closure) [reproduced Source: ...
  7. Reveal the true face of Javascript closures

    For beginners to understand Javascript closure (closure) is quite difficult, but the purpose of writing this a ...
  8. [Jim Jey]JavaScript Closures

    原文链接 Javascript Closures FAQ > FAQ Notes Introduction The Resolutio ...
  9. A thorough understanding of JavaScript

    A thorough understanding of JavaScript Programming world, there is only two basic elements, one for data, one ...
  10. A thorough understanding of JavaScript (an

    [] Wutou turn JavaScript (a) 2010-11-30 11:20 Reprinted from the final edit goodfriend_001 from a beautiful pe ...
  11. Depth understanding of the principles of database log system

    Depth understanding of the principles of database log system A: transaction system 1 affairs working model Tra ...
  12. javascript closures, the understanding of the scope

    The concept of closure that we first look at its definition it Accurate definition of closures: the scope of t ...
  13. Depth understanding of the eval function in javascript In this paper, the discovery of an appropriate title is not so easy, ...
  14. Chapter 7 Core Series JavaScript closures

    Chapter VII of the closure Closure has always been to include the JavaScript programmers, including programmer ...
  15. Further understanding of javascript objects. Array and hash table [reproduced]

    In javascript, the object is actually a hash table, such as following the user object: function user (n, a) ( ...
  16. (Turn) in-depth understanding of Javascript closure (closure)

    Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic ...
  17. In-depth understanding of Javascript closure (closure)

    Thank Recent on-line access to a lot of Javascript closure (closur ...
  18. Understanding of JavaScript in the sandbox

    javascript in the sand box is not in the traditional sense of the sand box, only a grammatical hack written it ...
  19. Light that JavaScript closures

    What is closure: Closure is a limited scope of functions is closed types of variables. Say, it seems too abstr ...