JavaScript execution context and execution stack

What is the execution context?

Execution context is the current code is parsed and the environment which you perform.

• Global code: The default execution environment, when the code where the first execution environment
• Function code: When entering the body of a function execution environment
• Eval code: When a piece of code passed to the evalenvironment when the function is executed
  
  purple box package global context person, , firstName3lastName function context, the entire code is only a global context, it can be accessed by three other contexts.

Execution context stack

JS parser browser is single-threaded, which means only one thing happened a time (one line of code execution), operation and event execution stack are pressed to the inside

when the browser first loads the script, will enter the global default execution context, if you call a function in the global code, then the program flow will enter the body of the function, create a function execution context, and this context will be top of the stack execution
would if you call other functions within the current function, then the same process occurs, the program flow into the body of the function, creates a new execution context, the context is pressed while the top of the stack. Browser always executes context located at the top of the stack, when a function is executed, the stack is removed from its context, and program control returns to the context of the next layer.

 (function foo(i) {
    if (i === 3) {
        return;
    } else {
        foo(++i);
    }
})(0);

Changes in the execution stack

The above code calls himself three times, all the variables plus one. Each time a function foocall, a new execution context is created. Once the execution has been completed, it is removed from the stack, and return to the next level execution context, only the stack until the global context.

Execution Context Key points

• JS is single-threaded code execution
• Execute code execution in the stack are synchronized
• There is only one global context
• There may be an unlimited number of function context
• Each function call both to create an execution context, the function calls itself too so

Thorough execution context

Each function call will create an execution context. In the JS parser, each time you create a function context will go through two stages.
1. Create a stage

• Create a scope chain
• Create an internal function variables, functions and parameters
• To thisreplicate

2, code execution stage

• Assignment to a variable, function references and code execution

executionContextObj = {
    'scopeChain': { ... },
    'variableObject': { ... },
    'this': {}
}

1. scopeChain : comprising variableObject, an outer layer and all context variables
2. variableObject : statement including parameters and internal variables of the function the function

Variable object (Variable Object)

After the function call, and before the function within the code is executed, it creates a context object execution executionContextObj, this is the first stage of what we call the JS parser: creation phase. Specifically, create a parser executionContentObjwill first scan variable declarations and function declarations function parameters passed, as well as internal functions, say these parameters and properties declared as the execution context objectvariableObject

The detailed process

1, find the function calls the function of the body
2, before executing the function body, create a context object execute
3, into the creation phase

• Initialization scope chain (scopeChain)

• Creating a variable object

  • Create a parameter object (arguments object), the context of the examination parameters, initialization parameter name and value
  • Scan function declaration in the context of
    • For each function declaration, will variableObjectcreate a property, a property called function names, and object references point to change the function in memory
    • If the function already exists, variableObjectthe value will be rewritten
  • Variable declaration scan context
    • For each variable declaration, all will variableObjectcreate a property, the property named variable names, while the value of the property is initializedundefined
    • If the property has been declared, then do nothing, skip
  • Clear context thisvalues

4. executing code

• In this context, executing code, assigned variable value, and sequentially executes the code line by line

function foo(i) {
    var a = 'hello';
    var b = function privateB() {};
    function c() {}
}

foo(22);

In the call foo(22), the execution context object creation stage

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

If shown, the value is only declare the definition of variables (except for function arguments), and not assigned to them in the creation phase. Once the phase function is created, the program flow into the executing code, the function completes execution, execution context objectfooExecutionContext

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

Named upgrade

Naming lifting means: variable declaration and the function declaration inside the function mentioned in the function domain top

​(function() {

    console.log(typeof foo); // function pointer
    console.log(typeof bar); // undefined

    var foo = 'hello',
        bar = function() {
            return 'world';
        };

    function foo() {
        return 'hello';
    }

}());

Let's explore the sending process to enhance the name of the form of questions and answers
1. Why can fooaccess to the former statement?

• In the creation phase, all the variables have been created, so when the function is executed, the variables foohave been defined in the context of a variable object

2. foodeclared twice, and why foois directed functioninstead undefinedor string?

• Despite the foostatement twice, but when you create a stage, function declaration will precede the variable is defined in the context object
• Therefore, a point function foo()of reference is first created, and then, when the interpreter scanned var foo, has seen property names fooexist, nothing will do, skip

3. Why is the bartype of undefined?

• barIs a pointer variable function expression in the creation phase variable values ​​are initializedundefined

Original link http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/#first-article