JavaScript execution context and in the execution stack

1. What is the execution context?

In short, the execution context is an abstract concept environmental assessment and execute JavaScript code. Whenever Javascript code at runtime, which is running in the execution context.

Execution context type

JavaScript There are three types of execution context.

Global execution context (GlobalExectionContext): This is the default or context-based, not on any internal function code in the global context. It performs two things: create a global window object (the case of the browser), and set the thisvalue equal to the global object. A program will only have a global execution context.
Function execution context (FunctionExectionContext): Whenever a function is called, for the function will create a new context. Each function has its own execution context, but is created when the function is called. Context can have any number of functions. Whenever a new execution context is created, it will be defined sequence (will be discussed later) performs a series of steps.
Eval function execution context : execute evalthe code within the function will have its own execution context, but due to JavaScript developers do not often use eval, so I will not discuss it here.

2. execution stack

The execution stack, which is called in other programming languages "call stack", has a LIFO (last in, first out) stack data structure, all execution context is created to store the code runs.

When the JavaScript engine first met your script, it will create a global execution context and pushed the current execution stack. Whenever the engine encounters a function call, it will create a new execution context and pushed on top of that function.

Engine performs the function of those at the top has an execution context. When the execution of the function execution context is popped from the stack, the control flow goes to a next context of the current stack.

E.g:

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

Here Insert Picture Description

When the above code is loaded in the browser, JavaScript engine creates a global execution context and put it onto the current execution stack. When faced with first()a function call, JavaScript engine creates a new function for the execution context and put it onto the top of the stack of the current execution.
When the first()calling function inside second()a function, JavaScript engine to second()create a new execution context and put it onto the top of the stack of the currently executing function. When the second()function completes its execution context stack will pop up from the current, and the control flow comes to a next execution context, i.e. first()execution context function.
When first()finished, it performs the context pop from the stack, the overall flow of control reaches the execution context. Once all the code is finished, JavaScript engine removed from the context of the current global execution stack.

3. how to create the execution context?

Creates an execution context has two phases: 1) creation phase and 2) the implementation phase .

Creation phase:

JavaScript code before execution, execution context will go through stages of creation. In the creation phase three things will happen:

this determines the value of that This binding (ThisBinding).
Create a lexical environment (LexicalEnvironment) components.
Create a variable environment (VariableEnvironment) components.

Therefore, the execution context represented conceptually as follows:

ExecutionContext = {
  ThisBinding = <this value>,//This 绑定
  LexicalEnvironment = { ... },//词法环境
  VariableEnvironment = { ... },//变量环境
}

This binding:

In the global context of execution, thisthe value of the global object. (In the browser, thisreferenced Window object).
In the context of the implementation of the function, thisthe value depends on how the function is invoked. If it is a reference object called, then thisit will be set to that object, otherwise thisthe value is set to global object or undefined(in strict mode).

E.g:

let foo = {
  baz: function() {
  console.log(this);
  }
}

foo.baz();   // 'this' 引用 'foo', 因为 'baz' 被
             // 对象 'foo' 调用

let bar = foo.baz;

bar();       // 'this' 指向全局 window 对象，因为
             // 没有指定引用对象

Lexical Environment:

Lexical environment is a type specification, defined based on the lexical nested structure ECMAScript code identifiers associated with and specific variables and functions. A lexical environment by the environment and a possible recording of reference outside null lexical environment components.

In simple terms Lexical Environment is a holding Variable Mapping - identifier structure. (Where the identifier refers to the variable / name of the function, the variables are the actual objects [Object contains function type] or references to the original data).
Lexical Environment There are two types:
1. Global Environmental :( in the global execution context) is not referenced in the external environment lexical environment. Its external environment reference is null . It has a global object (window object) and associated methods and properties (e.g. Array Method), and any user-defined global variables, thisthe value of the global object point.
2. In function of the ambient : user-defined variable in the function is stored in the environment record , the included argumentsobjects. A reference to the external environment can be a global environment, it can be a function of the external environment contains an internal function.
Lexical environment inside has two components:
1. Environmental recorder (EnvironmentRecord): store variables and the actual position of the function declaration.
2. A reference to the external environment (outer): access to its parent (external) lexical environment (scope).
Environmental recorder there are two types:
1. Declarative environment recorder store variables, functions and parameters.
2. Object Environment recorder used to define appear in the global context of the relationship between variables and functions.
in short:
1. In the global environment , the environment is the recording target environment recorder .
2. In the function environment , the environmental record is declarative environment recorder .
For the function environment , declarative environment recorder also includes a function to transfer the argumentsobjects (map and store the index object parameters) and the parameters passed to the function length .

Abstract speaking, lexical environment in pseudo-code looks like this:

//以下是全局执行上下文中的词法环境
GlobalExectionContext = {
  LexicalEnvironment: {//词法环境
    EnvironmentRecord: {//声明式环境记录器
      Type: "Object",
      // 在这里绑定标识符
    }
    outer: <null>//外部环境的引用
  }
}

//以下函数执行上下文中的词法环境
FunctionExectionContext = {
  LexicalEnvironment: {//词法环境
    EnvironmentRecord: {//对象环境记录器
      Type: "Declarative",
      // 在这里绑定标识符
    }
    outer: <Global or outer function environment reference>//外部环境的引用
  }
}

Environment variables:

It is also a lexical environment, its environmental record is held by the variable declaration statements binding relationship created in the execution context.
Variable environment is also a lexical environment, so it has all the properties of the lexical environment defined above.
In ES6, the lexical environment components and environment variables a difference is that the former is used to store variables and function declarations ( letand const) binding, whereas the latter is used to store varvariable bindings.

example:

Code:

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

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

c = multiply(20, 30);

Execution context looks like this:

//以下是全局执行上下文,包括This 绑定，词法环境，变量环境
GlobalExectionContext = {
  ThisBinding: <Global Object>, //This 绑定
  LexicalEnvironment: {//词法环境，包括对象环境记录器,外部环境的引用
    EnvironmentRecord: {//对象环境记录器
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>//外部环境的引用
  },
  VariableEnvironment: {//变量环境，包括对象环境记录器,外部环境的引用
    EnvironmentRecord: {//对象环境记录器
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>//外部环境的引用
  }
}


//以下函数执行上下文，包括This 绑定，词法环境，变量环境
FunctionExectionContext = {
  ThisBinding: <Global Object>,//This 绑定
  LexicalEnvironment: {//词法环境，包括声明式环境记录器,外部环境的引用
    EnvironmentRecord: {//声明式环境记录器
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>//外部环境的引用
  },
VariableEnvironment: {//变量环境，包括声明式环境记录器,外部环境的引用
    EnvironmentRecord: {//声明式环境记录器
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>//外部环境的引用
  }
}

Note : Only encountered calling function multiply, the function execution context will be created.

You may have noticed letand constdefined variables are not associated with any value, but varthe definition of the variables are set into undefined.

This is because when you create a stage, check engine codes to identify variables and function declarations, although the function declaration completely stored in the environment, but the variable is initially set undefined( varcase), or uninitialized ( letand constthe case).

That's why you can access before the declaration vardefined variables (although it is undefined), but access before the declaration letand constvariables will get a reference error.

This is what we say variable declarations upgrade.

The implementation phase:

At this stage, the completion of the distribution of all of these variables, and finally execute code.

Note - In the implementation phase, if not the actual location of the JavaScript engine declared in the source code to find the letvalue of a variable, it will be assigned undefined.

Reference finishing in: Link