JavaScript Learning notes--closures

This document complies with CC by-sa3.0

Objective:

Recently still looking at JavaScript, the first two days just read the closure of the part, and recently saw a few classic problems, aftertaste up the meaning of the unfinished, simply write down, for later to try to figure out.

Note: There are many references in this article, the address is posted here, but there seems to be no information. Reference address

Introduction:

Look at the code first:

var scope = "global scope";                 //   global variable function  choeckscope () {  var scope = "local scope";                //   Local Variables  function f () {return scope;}               //   return This value  in scope return F;    } Checkscope () ();                              //   What is the return value? 

The execution of JS is scoped to the scope chain, which is created when the function definition is used. The nested function f () is defined in this scope chain, where the variable scope must be a local variable, and the binding is still valid at execution F (), regardless of the execution of the function f () at any time.

So return to "local scope".

First, closure of the preliminary study (citation)

Look at the code again:

1 function  2  var i = 03  function B () {alert (+  + ) 4  return  b; 5 }6var c = A (); 7 C ();

　　

After executing var c=a (), the variable C actually points to function B, and then C () pops up a window showing the value of I (first 1). This code actually creates a closure, why? Because the variable C outside of function A refers to function B in function A, that is:

　　When function A's intrinsic function B is referenced by a variable outside of function A, a closure is created.

Let's talk a little more thoroughly. A "closure" is a method function that defines another function as the target object in the body of the constructor, and the method function of the object in turn refers to the temporary variable in the outer function body. This makes it possible to indirectly maintain the value of temporary variables used by the original constructor body as long as the target object retains its method throughout its lifetime. Although the initial constructor call has ended, the name of the temporary variable disappears, but the value of the variable is always referenced within the method of the target object, and the value can only be accessed through this method. Even if the same constructor is called again, but only new objects and methods are generated, the new temporary variable only corresponds to the new value, and the last time the call was separate.

Second, the microcosm in the closure package

To gain a deeper understanding of the relationship between closures and function A and nested function B, we need to introduce several other concepts: the function's execution environment (excution context), the active object (call object), scope (scope), scope chain (scope chain). Take 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 of function A to the "Environment" where A is located, and if A is a global function, the scope Only the Window object is in the chain.
2. When the function A is executed , a is entered into the appropriate execution Environment (excution context).
3. During the creation of the execution environment, a scope property, the scope of a, is first added for a, and the value is the scope chain in step 1th. That is, the scope chain of the a.scope=a.
4. 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 is not directly accessible through JavaScript code. After the active object is created, add the active object to the top of the scope chain of a. At this point A's scope chain contains two objects: A's active object and the Window object.
5. The next step is to add a arguments property on the active object, which holds the arguments passed when the function A is called.
6. Finally, the reference of all function A's parameters and internal function B is added to the active object of a. In this step, the definition of function B is completed, so as in the 3rd step, the scope chain of function B is set to the environment defined by B, which is the scope of a.

This completes the entire function A from definition to execution. At this point 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, which means that B can access all the variables and functions defined in a. Function B is referenced by C and function B relies on function A, so function A is not recycled by GC after it returns.

When function B executes, it will be the same as the above steps. Therefore, the scope chain of execution B contains 3 objects: The active object of B, the active object of a, and the Window object, as shown in:

　　

, when a variable is accessed in function B, the search order is:

1. Searches for the active object itself first, if it exists, returns if there is no active object that will continue to search for function A, and then finds it until it is found.
2. If the prototype prototype object exists in function B, it finds its own prototype object after it finds its own active object, and then continues to look for it. This is the variable lookup mechanism in JavaScript.
3. Returns undefined if none of the entire scope chain is found.

Third, summary

Actually understand the scope chain of the creation process, for the understanding of the closure can be a big step forward, and can be combined with the context of the issue to consider, feel a bit to understand a lot of things.

JavaScript Learning notes--closures