And closure scope chain

Before writing forget to save. . Now re-live it again.

First, the scope chain

1. Scope

In JavaScript, we can be defined as a set of scoping rules , this set of rules on how to manage the engine in the current scope and nested sub-scopes according to the identifier names were variable lookup . Identifier name refers to the variable or function names.

Execution context and the like, have global scope and scope function scope. We usually develop in eval hardly use it, do not discuss

But the scope and execution context are two completely different concepts. Throughout the execution of JavaScript code, in two stages, the code compilation stage and generation of code execution phase . Compilation phase is completed by the compiler to translate the code into executable code, this stage will determine the scope of the rules; implementation phase is completed by the engine, the main task is to execute the executable code, the execution context is created at this stage. Figure:

 

 

2. The scope chain

Review the execution context of the life cycle:

 

 Activation function when invoked, will begin to create context corresponding to the execution, during the execution of the context generated, variable object, scope chain, and this value will be determined separately. Before explaining the variable object, is now studying the scope chain.

The scope chain is determined by the current environment and the environment of the upper range of variable objects , it ensures that the current execution environment variables and functions in line with access to the orderly access .

With examples:

was a = 20 ; 

function test () {
     was b = a + 10 ; 

    function inner test () {
         were c = 10 ;
        return b + c; 
    } 

    Return inner Test (); 
} 

Test ();

In the above example, the implementation of the global context, the function test, the function innerTest has created. We set their variable objects are VO (global), VO (test), VO (innerTest). And innerTest scope chain, while the three variables comprising the object, the execution context innerTest be expressed as follows.

= innerTestEC { 
    VO: {...},   // variable object 
    scopeChain: [VO (innerTest), VO (Test), VO (Global)], // scope chain 
}

An array can be directly used to indicate the scope chain, the first scopeChain array [0] is the most distal end of the scope chain, and the last one of the array, most of the scope chain end, are all global endmost variable object:

 

 

Second, closure

1. Closure defined

Closure is a special target . It consists of two parts: an execution context (code A), and the function created in the context of the execution (code B). When B is executed, if the value of the variable access object A, then the closure will be generated.

In most understanding, including many well-known books, articles in all in the name of a function on behalf of that closure of B generated here. In the chrome, places the function name executed on behalf of the context A closure means.

With examples:

function foo() {
    var a = 20;
    var b = 30;

    function bar() {
        return a + b;
    }

    return bar;
}

var bar = foo();
bar();

The above example, it is first execution context foo, foo is defined in the function bar, the bar and returned by the external way to make bar to be executed. When the bar execution, visited the inside of the foo variable a, b. Therefore this closure time is generated.

JavaScript has automatic garbage collection mechanism, when a value is lost when referenced in memory, garbage collection will find it according to a special algorithm and recovered memory is freed.

The execution context function, after the completion of the life cycle is completed, then the execution context of the function will lose reference. Its memory space occupied will soon be released garbage collector.

But there is closure, it will stop this process.

With examples:

var Fn = null ;
 function foo () {
     var A = 2 ;
     function innnerFoo () { 
        the console.log (A); 
    } 
    Fn = innnerFoo; // the innnerFoo reference, assigned to the global variable Fn 
} 

function bar ( ) { 
    Fn (); // reserved reference herein innerFoo 
} 

foo (); 
bar (); // 2

In the example above, foo()after the execution is completed, according to common sense, the implementation of its environmental life cycle will end, share memory is freed garbage collector. But by fn = innerFoothe function innerFoo references were retained, copied to the global variable fn. This behavior leads to variable object foo, it has also been retained. Thus, the function fn in the implementation of the internal function bar, you can still access the variable objects are preserved. So at the moment we are still able to access the value of a variable. In this way, we can say foo for the closure. The following figure shows the closure scope chain foo:

 

 

2. scenarios

Curried, module