Js execution context and scope

1. execution context and the execution stack

JavaScript execution context is the current code is parsed and the environment where the abstraction of execution, JavaScript code running in any context are run in execution.

Life cycle execution context consists of three stages: creation phase → → implementation phase of the recovery phase, we focus on creation phase.

Creation phase (when the function is called before, but did not perform any of its internal code) will do the following three things:

Creating variable objects: first initialization parameter arguments functions to enhance the function declarations and variable declarations.
Create a scope chain
Determine this point

function Test (arg) {
 // 1. arg parameter is "Hi" 
// 2. Because the function declaration higher priority than the variable declaration, so in this case is arg function 
the console.log (arg);
 var arg = 'Hello' ; // 3.var Arg variable declaration is ignored, arg = 'hello' is performed 
function Arg () { 
　　the console.log ( 'Hello World' ) 
} 
the console.log (Arg); 
} 
Test ( 'Hi' );
 / * output: 
function Arg () { 
　　the console.log ( 'Hello World'); 
} 
Hello 
* /

This is because when the function is executed, will first form a new private scope , and are executed in the following steps:

If the physical parameter, the parameter assignment give
Pre explain privatize scope, function declarations high priority than the variable declaration, which will be covered by the last of the former, but can be reassigned
Private scope of the code executed from top to bottom

Function more, there are more functions execution contexts, each call to a function to create a new execution context, that created so much how to manage the execution context it?

JavaScript engine creates an execution stack to manage the execution context. It can be considered as the execution stack stack structure of a storage function call, after the principle of follow-out basis .

// Mu Course Notes reference to the illustrated example about:
 the console.log (. 1 ); 

function PFN () { 
    the console.log ( 2 ); 
    ( function CFN () { 
        the console.log ( . 3 ); 
    } ()); 
    the console.log ( . 4 ); 
} 
PFN (); 

the console.log ( . 5 );
 // output: 12345

From the flow chart above, we need to remember a few key points:

JavaScript is executed on a single thread, all of the code are queued for execution.
When beginning the implementation of the global browser code, first create a global execution context, pressed into the top of the execution stack.
Whenever entering a function of performing the function execution context is created, and it is pressed into the top of the execution stack. After the completion of this function is executed, the current execution context stack function, and for garbage collection.
JS execution engine browser access to execution context is always top of the stack.
There is only a global context, it popped when the browser is closed.

2. Scope and the scope chain

ES6 arrival of JavaScript has global scope, function scope and block-level scope (ES6 new).

We can understand: Scope is an independent site, so that variable will not be disclosed, exposed to. That scope is most useful is to isolate variables, variables of the same name in different scopes there will be no conflict .

Function scope : variable name suggests is in this function to access the inside of the body; of course you can use closures to achieve inter-regional access local variable scope; View

Block-level scope : ES6 new, added block-level scope with the let command, outer scope can not get to the innermost scope, very safe and straightforward. Even if the outer and inner layers using the same variable name, also interfere with each other;

Next we come to understand the next free variable (that is, global variables);

In the following code, the console.log (a) to obtain a variable, but not in the current definition of a scope (can compare b). The current scope of the variable is not defined, it is a free variable.

var a = 100
 function Fn () {
　　var B = 200 is 
　　the console.log (a) // here, this is a freedom in a variable 100 
　　the console.log (B) // 200 is 
} 
Fn ()

Next, look at an example:

function F1() {
　　var a = 100
　　return function () {
　　　　console.log(a)
　　}
}
function F2(f1) {
　　var a = 200
　　console.log(f1())
}
var f1 = F1()
F2(f1) // 100

The above code, the value of a free variable, Find function F1 instead of F2, because when free variables to find the scope chain, based on the scope chain when the function is defined, not when the function is executed.

So how do you get the value of free variables? - the parent scope (to create the parent scope of the function) to find .

If the parent did not it? Then looking up layer by layer, until you find the global scope or not found, he renounced. This relationship layer by layer, is scope chain.