Do you know the JS execution process?

As we know, when we write the JS program, open the browser, our code can start to run (sure your code is not a problem, to follow your expectations). Just said is JS execution of a large environment, today we learn, JS in the parser in a process of execution.  The process is divided into two stages:

• Go to execution context
• Execute code

variable object changes are closely related to these two phases.  before you introduce these two phases, understand the relevant concepts. if the variables are related to the execution context, then it should know where to store the data and how to access the data, a mechanism called the variable object (variable object, or VO). Used to store the following data:

• Variable declaration
• function declaration (this place needs to be distinguished from the function expression)
• function parameters

 First stage: Enter the execution context. At this point Vo will be initialized by the following properties (initialized in the following order):

• Function parameter: A property of Vo, which is a physical parameter name and value, and if no argument is passed, it is the name and undefined of the formal parameter.
• Function declaration: consists of the name and value of the function, and if the attribute value exists in Vo, this property is replaced.
• Variable declaration: consists of variable name and undefined, if the variable name and VO have the same function parameter or function declaration, then the variable declaration does not interfere with the existing property.

VO's use environment is: Globalcontext and Functioncontext.  Here's an example:   ?

1 2 3 4 5 6 7

function test(a, b) {       var c = 20;       function d(){}       var e = function _e(){};      (function x(){}); } test(30);

    when entering the execution environment, VO is as follows:   ?

1 2 3 4 5 6 7

vo (test Functioncontext) = { &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; a:30, &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; b:undefined, &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; d: <reference to Functiondeclaration "D" >, &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; c:undeifined, &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; e:undefined &NBSP;&NBSP;&NBSP; }

 Note: where x, _e are function expressions, _e are accessed through variable declaration E.  Next, proceed to the next stage, executing the code phase:in the example above, you will experience the following process:    ?

1 2	VO[‘c‘] = 20;VO[‘e‘] = <reference to FunctionDeclaration "_e">;

 so the code is done.  let's take another classic example:    ?

1 2 3) 4 5

alert(x); //function var x = 10; x = 20; function x() {}alert(x);    //20

 Why is the first function, not undeofined or not defined or 10, 20? Because, according to the specification-when entering the context, the function declaration is filled into VO, and at the same stage there is a variable that declares "X", so as we said in the previous stage, the variable declaration follows the function declaration and the formal parameter declaration in order, and at this stage, A variable declaration does not interfere with a function declaration or formal parameter declaration that already exists in Vo, so when entering the context, VO's structure is as follows:    ?

1 2 3

VO = {} VO[‘x‘] = <reference to FunctionDeclaration "x">;VO[‘x‘] = <the value is not disturbed, still function>

 during the code execution phase: ?

1 2	V[‘x‘] = 10;V[‘x‘] = 20;

　　

Understanding this process, I believe that the JS implementation process will have a new understanding. Leave a small question (guess the output):?

1 2 3 4 5 6 7 8

function test(a, b) {       var c = 20;       console.log(a);//结果是什么？为什么？       function a(){}       var e = function _e(){};      (function x(){}); } test(30);

 Reference Documents:http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/