What is the JS execution context?

We all know that the order of execution JS code will always be different from the order of the code, the head aside asynchronous issue you will find that even the synchronization code, its execution is also inconsistent with your expectations, such as:

function F1 () { 
    the console.log ( 'hear the wind wind' ); 
}; 
F1 (); // echo 

function F1 () { 
    the console.log ( 'echo' ); 
}; 
F1 (); // echo

According to the code written order, the output should first hear the wind is the wind, and then output echo fishes, unfortunately, the two outputs are echo; if we declare a function in the above code change function expression , the results are not the same:

var F1 = function () { 
    the console.log ( 'hear the wind wind' ); 
}; 
F1 (); // hear the wind is the wind 

var F1 = function () { 
    the console.log ( 'echo' ); 
}; 
F1 (); // echo

This shows that the code must have happened some subtle changes prior to execution, JS engine actually done anything at all? This must mention the JS execution context.

JS execution context

JS code before execution, JS engine always do some preparation work, in fact, the job is to create a corresponding execution context;

Execution context and only three categories, global execution context, the function context, and eval context ; eval is generally not due to the use, not discussed here.

 

1. The global execution context

Only a global execution context, the client is generally created by the browser , and is known window object, we have direct access to it through this.

 

 

 Global object window on a number of predefined methods and properties, we can directly access these methods in any property at the global environment, while support global variables window object or var statement . We var created by global object, can be accessed directly through the window.

 

 

 2. The function execution context

Function execution context there can be numerous, whenever a function is called creates a function context ; Note that, by calling the same function will create a new context .

Having said that you will want different types of context, and the number is still so much to create a relationship between how they are, but also who is going to manage the context of it, which had to talk about the execution context stack up .

 

Execution context stack (execution stack)

Execution context stack (hereinafter abbreviated execution stack), also known as the call stack, all contexts created for the execution stack during the execution code stored, the LIFO characteristic having (a rear advanced Last In First Out) of.

 

JS code first run, will create a global execution context and pressed into the execution stack , then whenever a function is called, will create a new function execution context and pressure within the stack; due to the characteristics of the execution stack LIFO,

It can be understood as, at the bottom of the stack before the execution JS code is finished forever have a global execution context .

 

function f1() {
    f2();
    console.log(1);
};

function f2() {
    f3();
    console.log(2);
};

function f3() {
    console.log(3);
};

f1();//3 2 1

 

We explain the relationship between the stack and by performing the process execution context code above, for ease of understanding, we have the illusion of the execution stack is an array , in the initial execution of the code will create a global execution context onto the stack and, thus process is as follows:

// before the code is executed to create a global execution context 
ECStack = [GlobalContext];

// f1 call 
ECStack.push ( 'f1 functionContext' );

// f1 and calls f2, f2 is completed before the execution can not console 1 
ECStack.push ( 'F2 functionContext' );

// F2 has called f3, unable to console 2 before f3 finished 
ECStack.push ( 'f3 functionContext' );

// F3 is finished, the output of the stack 3 and 
ECStack.pop ();

// F2 is finished, the output of the stack 2 and 
ECStack.pop ();

// F1 is finished, the output 1 and the stack 
ECStack.pop ();

// At this time, only one execution stack global execution context

 

So here we explain the rules of the execution stack and store execution context; remember my previous mentioned code is executed before JS engine will make it ready to create the execution context, specifically how to create it, we went on to say.

Execution context creation phase

Create a divided execution context creation phase and the implementation phase two stages , the more difficult to understand should be the creation phase, we start with creation phase.

JS execution context creation phase is responsible for three things:

1. Determine this

2. Create a lexical environment (LexicalEnvironment)

3. Create a variable environment (VariableEnvironment)

 

Here I'll just learn from others translated the pseudo-code data, to represent the creation process:

= ExecutionContext {  
     // determine this value 
    the ThisBinding = < this value> ,
     // Create lexical environment 
    the LexicalEnvironment = {},
     // create a variable environment 
    the VariableEnvironment = {}, 
};

If you have read other articles about the execution context must have read this question , the execution context of the creation process should not explain this, the scope of the variable object / active object fishes do , how to say other places with not the same, this I explain later.

1. Determine this

The official call for This Binding, global execution context, this always points to the global object, such as browser environment this point to the window object.

In the context of the implementation of the function, depending on the value of this function is called, if an object is invoked, then this refers to the object. Otherwise, this generally points to the global object window or undefined (strict mode).

 

2. Lexical Environment

Lexical environment containing a variable mapping configuration identifier, the identifier indicates where the name of the variable / function , the variable is a function of the actual object comprises [] type object or a reference to the original value. (That can not read)

Lexical environment into the global lexical environment and function lexical environment two kinds

 

Global Lexical Environments:

Introducing the external environment record is null, as it is the outermost layer of the environment itself, except that it contains all the properties of the global object method , and global object (declared by var) user-defined.

 

Lexical Functions environment:

It includes all the variables in the user-defined function , but also includes a arguments object . Lexical function environment external environment may be introduced into the global environment, the environment may be other functions , in accordance with this comes the actual code.

 

// global environment 
GlobalExectionContext = {
     // Global Lexical Environment 
    the LexicalEnvironment: {
         // Environment Record 
        EnvironmentRecord: { 
            the Type: "Object", // the type of the object environment record 
            // identifier binding Here 
        }, 
        Outer: < null > 
    } 
}; 
// function of ambient 
FunctionExectionContext = {
     // function lexical environment 
    the LexicalEnvironment: {
         // environment record 
        EnvironmentRecord: { 
            the type: "the declarative", // type declarative environment record
            // identifier binding Here 
        }, 
        Outer: <Free Join or outerfunction Environment Reference> 
    } 
};

 

3. Environment Variables

Environment variables can also say that the lexical environment, it has all the attributes of lexical environment , as has the introduction of environmental records and the external environment. The only difference lies in the lexical environment for ES6 variable storage and let const function declaration statement , and the variable stored in the environment variable var merely declared.

We have to understand them by a bunch of pseudo-code:

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}

c = multiply(20, 30);

 

We pseudocode to describe the process of creating the above code execution context:

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}

c = multiply(20, 30);

We pseudocode to describe the process of creating the above code execution context:

// global execution context 
GlobalExectionContext = {
     // the this global object bound to 
    the ThisBinding: <Object Free Join> ,
     // lexical environment 
    the LexicalEnvironment: {  
         // Environment Record 
      EnvironmentRecord: {   
        the Type: "Object",   // Object Environment Record 
        @ binding variable identifier created here let const ab in which 
        a: <uninitialized> ,   
        B: <uninitialized> ,   
        Multiply: <FUNC>   
      } 
      // global environment external environment is introduced as null 
      outer: < null >   
    },
  
    The VariableEnvironment: {   
      EnvironmentRecord: {   
        the Type: "Object",   // the object environment record 
        // identifier binding c var created here in this 
        c: undefined,   
      } 
      // global environment external environment is introduced as null 
      Outer: < null >   
    }   
  }

 

  // function execution context 
  FunctionExectionContext = {
      // Because this function is called by default binding global object is also 
    the ThisBinding: <, Ltd. Free Join Object> ,
     // Lexical Environment 
    the LexicalEnvironment: {   
      EnvironmentRecord: {   
        Type: "the Declarative",   // declarative environment recording 
        // identifier binding arguments here that the object in 
        the arguments: {0: 20 is,. 1: 30, length: 2 },   
      },   
      // external environment is introduced into the record </ Free Join> 
      outer: <GlobalEnvironment>   
    }, 
  
    the VariableEnvironment : {   
      EnvironmentRecord: {   
        Type: "the Declarative",   //Declarative environment record 
        // identifier binding var created here in this g 
        g: undefined   
      },   
      // external environment is introduced into the record </ Free Join> 
      Outer: <GlobalEnvironment>   
    }   
  }

I do not know you have not found, create a stage in the execution context, variable function declaration with the var declared in the creation stage has been given a value, var statement is set to undefined, the function is set for its own functions, and let const is set to Uninitialized.

Now you always know the variables to enhance the function declarations in advance how it was it, and why let const Why have a temporary dead zone, because the scope is created for both the initialization phase JS engine different assignment.

In addition to creating the context of the stage, as well as the implementation phase, which we should be better understood, when the corresponding code is executed in accordance with environmental record before assignment, such as early stage in the creation of var is undefined, if there is a corresponding value is assigned, like let const value uninitialized, if value is assigned no value is given undefined.

 

to sum up

1. The global execution context is generally created by the browser, it will create code execution; execution context is created only function when the function is called, how many how many times a function call context is created.

 

2. The call stack is used to store all the execution context, to meet the FILO rule.

 

3. Do the context establishment phase is divided into binding this, create a lexical environment, the environment variable three-step, two difference is that the lexical environment variable to store the function declaration with const let statement, but only stores variable environment variable var declaration.

 

4. Environment Record two lexical part mainly introduced by the recording environment and the external environment consisting, global context, and the context functions introducing external environment is not the same record, the global null, the function is a function of the global environment or other environment. Environmental records are not the same, the overall environmental record called objects, functions, called declarative environment record.

 

5. You should understand why there is a variable lift, function improved, but did not let const.

 

Concept before 6.ES3 variable objects and active objects after ES5 be explained by the lexical environment, environment variables, the two do not conflict with the concept, which is more user-friendly understanding.