js execution context stack and the variable object

JS is single-threaded language, the order of execution is definitely the order of execution , but the JS engine does not line by line analysis and implementation program, but paragraph by paragraph analysis of the implementation will be compiled and then stage is the implementation phase.

Example 1: variable lift

foo;  // undefined
var foo = function () {
    console.log('foo1');
}

foo();  // foo1，foo赋值

var foo = function () {
    console.log('foo2');
}

foo(); // foo2，foo重新赋值

Example 2: Function upgrade

foo();  // foo2
function foo() {
    console.log('foo1');
}

foo();  // foo2

function foo() {
    console.log('foo2');
}

foo(); // foo2

Example 3: Statement priority function> variable

foo();  // foo2
var foo = function() {
    console.log('foo1');
}

foo();  // foo1，foo重新赋值

function foo() {
    console.log('foo2');
}

foo(); // foo1

In the above three examples, the first example is a variable lift, a second example is to enhance the function of the third example is the function declaration higher priority than the variable declaration.

It should be noted that the function declaration in the presence of the same name in the same scope, it will replace the previous function declaration back.

Execution Context

There are three types of execution context

Global execution context : there is only one global object browser is the window object, thispoint to the global object.
Function execution context : the presence of numerous, will only be created when the function is called, each call to the function will create a new execution context.
Eval function execution context : refers to the operation in evalthe code of the function, rarely used and is not recommended.

Execution context stack

Because JS engine creates a lot of execution context, so the JS engine creates an execution context stack (Execution context stack, ECS) to manage the execution context.

When the JavaScript initialization time will be pushed to the execution context stack a global execution context, we express it with globalContext, and only when the entire application end time, the execution stack will be empty , so before the end of the program, execution stack the bottom forever there globalContext.

ECStack = [     // 使用数组模拟栈
    globalContext
];

find difference

The following two pieces of code, the result of execution is the same, but the two pieces of code what is the difference?

//代码一
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

//代码二
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

The answer is to change the execution context stack is not the same.

First piece of code:

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);//这里checkscope函数还没出栈，且函数f入栈
ECStack.pop();
ECStack.pop();

The second paragraph of code:

ECStack.push(<checkscope> functionContext);
ECStack.pop();//这里checkscope函数已经执行结束，出栈
ECStack.push(<f> functionContext);
ECStack.pop();

Function context

In the context of function with active objects (activation object, AO) represent variable objects.

Activities and variable objects of difference that

1, variable object (VO) is a specification or the JS engine is achieved, and can not directly access the JS environment .
2, when entering the execution context to a variable object will be activated , so called active objects (AO), this time the activities of the various properties on the object to be accessed .

The function is called , it will create a Arguments object , and automatically initialize local variable arguments, refer to the Arguments object. All parameters passed in as the value of the array elements will become Arguments object.

Implementation process

Code execution context for processing will be divided into two phases

1, into the execution context
2, the code execution

Into the execution context

Obviously, this time not to execute code

At this time, the objects including variables (initialization following order):

1, a function of all parameter (only function context): no argument, the attribute value is set to undefined.
2, the function declaration : If a variable object properties of the same name already exists, completely replace the property.
3, variable declaration : if the variable name with the parameter or function has been declared the same , then the variable declaration does not interfere with such attributes that already exist.

Look at an example:

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;
}

foo(1);

For the above code, this time is AO

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined, 
    c: reference to function c(){},
    d: undefined
}

Parameter arguments this time already has an assignment , but the variable is undefined , but initialization value

Code execution

This phase will sequentially execute the code , change the contents of the object, after it is executed AO follows:

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

Here it will be assigned a variable.

Summarized as follows:

1, the global context variable object is initialized global object
2, the function of the context object initialization variables include only objects Arguments
3, when entering the object variable execution context will add parameter, a function declaration, the variable declaration initial property values, etc.
4, executing code, it will modify the property value of the variable object again

Reference article
JavaScript execution context stack depth of objects and variables