1. Introduction

JavaScript itself is an “interpreted” language. Unlike Java, which compiles code to a binary file and hands it to a virtual machine to execute; JavaScript engines “evaluate” a piece of code before running it in the thread of execution. When you evaluate your code, you have variables, functions, this, and other data ready for the code to run. This process of preparing data is creating an Execution environment, which is usually included in Execution context –EC.

Before introducing the execution context, we need to know:

The JavaScript parser is runningjsCode time is a single-threaded execution mechanism, so only one piece of code (function) can be executing at any one time;
Before running a piece of JavaScript code, the JS parser creates an execution environment (execution context). It does some preparatory work before you run the code so that the information you need (variables, functions, this, and so on) is ready for execution.

Executable Code

When a JS application starts, it executes a piece of “executable code”; When the user triggers an interaction, the application simultaneously fires a specific event, which also executes a piece of “executable code.” So to understand the execution context, you first need to know the “Executable Code.”

There are three types of ECMAScript executable code:

Global code is the source code text written in a JavaScript file or embedded in HTML that can be processed by an ECMA script, excluding the source text in the function body.

<script>
    var str = 'guojing';
    function fn(){
        // This is not global code, because it is in the function body
        console.log(str);
    }
    fn()
</script>
Copy the code

The Eval code is the source code text passed to the parameter part of the Eval function, which becomes executable code.

eval('alert("hello, world.")'); // The argument is the Eval code
Copy the code

Function code is the source code text parsed as the FunctionBody of a function, excluding nested FunctionBody code.

function test(){
    / / here. The code inside the function body is the function code
    var a = 10;
    console.log(a);
}
Copy the code

3. Environmental records

Context records are a canonical type used to define associations of specific variables and function identifiers based on lexical nesting structures in ECMAScript code.

Typically, the lexical context is associated with specific syntactic constructs of ECMAScript code such as FunctionDeclaration, Catch blocks WithStatement, or TryStatement, And a new environment record is created each time similar code is executed.

Each environment record has a [[OuterEnv]] field, which is either null or a reference to an external environment record. This is used to model logical nesting of environment record values. An external reference to an (internal) environment record is a reference to an environment record that logically surrounds an internal environment record. Of course, the external environment record can have its own external environment record. An environment record can serve as an external environment for multiple internal environment records. For example, if a function declaration contains two nested function declarations then the environment record of each nested function will have the environment record of the current evaluation surrounding function as its external environment record.

3.1 Environment Record Types

The environment record can be thought of as a simple object-oriented hierarchy, where the environment record is an abstract class with three concrete subclasses: declarative environment record, object environment record, and global environment record. Function environment record and module environment record are subclasses of declarative environment record.

Environmental records are divided into:

Declarative Environment Records

Function Environment Records

Module Environment Records

Object Environment Records

Global Environment Records

3.2 Declarative environment record

Each declarative environment record is associated with an ECMAScript program scope that contains variables, constants, lets, classes, modules, imports, and function declarations. A declarative environment record binds a set of identifiers defined by the declarations contained within its scope.

In simple terms, a declarative environment records the binding relationship between an identifier defined for a variable declaration (var, const, let), class, module, import, or function declaration, and so on, and its value.

The function environment records function objects that correspond to ECMAScript calls and contains all bindings declared inside the function. It is also possible to bind this, as well as the state required to support super calls.

The module environment record contains all of its declared bindings at the top, as well as the bindings of other modules that are explicitly imported. Its external environment reference [[OuterEnv]] is a global environment record.

3.3 Object Environment Record

Each object environment record is associated with an object called its binding object. The object environment record binds a set of string identifier names that correspond directly to the property names of its bound object. Property keys that are not strings are not included in the binding identifier set. Regardless of the setting of the [[Enumerable]] property, both your own and inherited properties are included in the collection.

The object environment record is typically used in a WithStatement to directly establish a one-to-one relationship between a series of identifiers and the property names of the object to which they are bound.

The field names	value	meaning
[[BindingObject]]	Object	Binding objects
[[IsWithEnvironment]]	Boolean	Which means whether or notEnvironmental recordsIs for`with`Statement created.

var withObj = {name: 'haha'}
with(withObj){
  console.log(name); // 'haha'
  name = 'heihei';
  console.log(name); 
  console.log(constructor);
}

// Object environment record description
// ObjectRecord => {[[BindingObject]]: withObj, [[IsWithEnvironment]]: true}
Copy the code

3.4 Function Environment Record

Function environment records are declarative environment records that represent the top-level scope of a function, providing the This binding if the function is not an ArrowFunction. If a function is not an ArrowFunction function and refers to super, its function environment record also contains the state used to perform the super method call from within the function.

The field names	value	meaning
[[ThisValue]]	Any	The value of this when the function is called
[[ThisBindingStatus]]	lexical or initialized or uninitialized	If the value is lexical, then this is an arrow function with no local this value
[[FunctionObject]]	Object	The function object that creates a record of the current function environment
[[NewTarget]]	Object or undefined	If the environment record was created by the [[Construct]] internal method, [[NewTarget]] is the value of the [[Construct]] NewTarget parameter. Otherwise, its value is undefined.

3.5 Global Environment Records

The global environment record is used to represent the outermost scope scope shared by all ECMAScript script elements. Global environment records provide bindings for built-in global variables, properties of global objects, and all top-level declarations that occur in scripts.

The global environment record is logically a single record, but it is specified as a combination of encapsulated object environment record and declarative environment record. Object environment records have global objects as their base objects. The object of the global record the environment record component contains bindings for all built-in global variables as well as those contained in the global code FunctionDeclaration, GeneratorDeclaration, AsyncFunctionDeclaration, AsyncGeneratorDeclaration or VariableStatement introduced all of the binding. Bindings for all other ECMAScript declarations in the global code are contained in the declarative environment record component of the global environment record.

In summary, the global environment record is used to declare bindings for global code, which are created before the code of any ECMA script is executed. A global environment record is specified as a single record of a composite encapsulated object environment record and a declarative environment record. There is no external environment reference, i.e. its [[OuterEnv]] is null.

The field names	value	meaning
[[ObjectRecord]]	Object Environment Record	The binding object is a global object. It contains global built-in bindings as well as FunctionDeclaration, GeneratorDeclaration, AsyncFunctionDeclaration and VariableDeclaration bindings in the global code of the associated domain
[[GlobalThisValue]]	Object	The this value returned in the global scope. The host can provide any ECMAScript object value.
[[DeclarativeRecord]]	Declarative environmental records	Bindings for all declarations contained in the global code of the correlation domain except FunctionDeclaration, GeneratorDeclaration, AsyncFunctionDeclaration, and VariableDeclaration bindings
[[VarNames]]	List of strings	FunctionDeclaration, GeneratorDeclaration, AsyncFunctionDeclaration, and VariableDeclaration declare binding string names in the global code of the associated domain.

So FunctionDeclaration, GeneratorDeclaration, AsyncFunctionDeclaration and VariableDeclaration are not in Declarative Environment Record, but in Object Environment Record, This also explains why variables declared with var and function in global code automatically become properties of global objects, while variables declared with let, const, class, etc., do not become properties of global objects.

var x = 1; // VariableDeclaration
function f(){} // FunctionDeclaration
console.log(y) // Uncaught ReferenceError: Cannot access 'y' before initialization
let y = 10;
const z = 'z';
Create environment records before code execution
GER = {
    ObjectRecord: {BindingObject: {... window,x:undefined.f:'<func>' }, IsWithEnvironment: false,},GlobalThisValue:window.DeclarativeRecord: {
        y:<uninitialized> // the code is initialized to undefined only when it specifies the declaration statement "let y"
        z:<uninitialized>
    },
    VarNames: ['x'.'f']}Copy the code

It also helps us understand what variable and function declaration boosts and let/const temporary dead zones are.

var x = 1; // VariableDeclaration
function f() {} // FunctionDeclaration
// console.log(y);
let y;
console.log(y); // undefined
y = 10;
const z = 'z';
Copy the code

2.6 Module Environment Records

The module environment record is a declarative environment record that represents the external scope of an ECMAScript module. In addition to the normal mutable and immutable bindings, module environment records provide immutable import bindings that provide indirect access to target bindings that exist in another environment record.

2.7 Object Structure Description Environment records

// Global environment record
GlobalEnvironmentRecord = {
    ObjectRecord: {BindingObject: window.IsWithEnvironment: false,},GlobalThisValue:window.DeclarativeRecord: {},VarNames: [].OuterEnv: null
} 
// Function environment record
FunctionEnvironmentRecord = {
    ThisValue: <any>,
    ThisBindingStatus: lexical | uninitialized | initialized,
    FunctionObject: <func>
}
Copy the code

2.8 Common Operations for Environment Records

Common operations in the ECMAScript specification are as follows:

2.8.1 GetIdentifierReference ( `env`.`name`.`strict` )

Gets a reference to an identifier.

Parameter: env An environment record or null; Name Indicates the identifier name. Strict bool Indicates whether the mode is strict.