This article is based on

Ecma-262/15 October 2020

ECMAScript ® 2021 Language Specification

Why do we have variables ahead?

This is simply a side effect of implementing a function promotion.

So in the ES6 era, please replace let const across the board

According to BrendanEich himself (twitter.com/BrendanEich… * *”

Why do we have a function ahead of time?

  • Allows pre-declaration invocation
Function addTwo(x) {return addOne(x))} function addOne(x) {return x + 1 You can call addTwo if you wantCopy the code

If you do not promote, you must write all dependent functions to the front.

This is very unfriendly to program writing, so there is function promotion

Execution context

The execution context is like a table of information written inside the current code, while the agent is like a behind-the-scenes robot that holds the execution context to help execute the code, also known as code evaluation.

The execution context consists of the following:

  • Code evaluation status

    Represents the state of executing, suspending, and resuming code calculations associated with this execution context. Simply put: Record the state of the context.

  • Function

    If the execution context is evaluating the code for a function object, the value of this component is the function object. Simply put: Don’t know why you have this component

  • Domain (global environment)

    Domain records of associated code accessing ECMAScript resources. A realm consists of a set of internal objects, the ECMAScript global environment, all ECMAScript code loaded within the scope of that global environment, and other associated states and resources. Simply put: a domain contains global objects. So global objects and built-in objects can be invoked freely in the execution context.

  • Script or pattern

    Module record or script record of the source of the associated code. This value is null if there is no original script or module, as in the case of initializing the original execution context created in the host definition Realm. In short: to distinguish between module and script environments.

  • Vocabulary environment (optional)

    The environment record used to resolve identifier references made by code in this execution context. Simply put: a lexical environment is a collection of environmental records

In fact, when JS creates the execution context, the declared variables and functions are uniformly loaded into the internal environment record. When you call a variable or function, you can check the table to find the corresponding memory and execute the code.

Execution stack

The execution context stack is used to track the execution context. The running execution context is always the top element of the stack.

Each time a control moves from executable code associated with the execution context currently running to executable code that is not associated with that execution context, a new execution context is created. The newly created execution context is pushed onto the stack and becomes the running execution context.

When the executable completes execution, the top element pops up.

When the program starts running, a global execution context is created and pushed onto the execution stack, and each time a function is called, a new execution context is created and pushed onto the stack.

The life cycle

The execution context goes through three phases

  1. Create an environment
  2. Execute the code
  3. Eject execution stack

Environmental records

An environment record is a mapping object that establishes identifiers – variables. An identifier here refers to a variable name or function name, while a variable is the original value of the actual variable or the reference address of the object/function.

Each environment record has an [OuterEnv] (External environment record) field, which is null or a reference to the 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 be used as an external environment for multiple internal environment records. For example, if the function declaration contains two nested function declarations then the environment record for each nested function will have the environment record as its external environment record to currently evaluate the surrounding functions.

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

Each execution context contains lexical environment components, lexical environment components contain multiple different types of environmental records,

  • Declarative environmental records

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

    This means classifying all declarations of const let class Module function import into declarative environment records. And bind identifiers and values

  • Object Environment Record

    Each object environment record is associated with an object called the Binding Object of the object environment record. The object environment record is based on this binding object, and the identifier is bound in the form of the object attribute. The identifier corresponds to the attribute name of the Binding object. Object environment records are used to define ES syntax elements that bind identifiers to certain object attributes, such as the WITH statement, global var declarations, and function declarations.

    The main record is the environment window.Math = Math;

  • Functional environment record

    A function environment record is a declarative environment record that represents the top-level scope of a function, providing the this binding if the function is not an arrow function.

    The table is taken from【JS Compacting execution Context and Lexical Environment 】

  • Global environment Record

    The global environment record is logically a single record, but it is specified as a composite record that encapsulates the object environment record and the declarative environment record. This record object provides bindings for the built-in global object, its properties, and all top-level declarations that occur in the script. This record is used to execute the domain component of the context and is equivalent to providing a global environment record for each context object.

  • Module Environment Record

    The module environment record is used to represent the external scope of a module (that is, the environment where the module export resides). In addition to the normal bindings, it also provides the bindings of all imported modules (that is, all imported modules, which are read-only) so that we can directly access imported modules.

conclusion

Execution context {code evaluation state, function, domain :{global environment record}, script or pattern, vocabulary environment (optional) :{declarative environment record, object environment record, function environment record, module environment record, global environment record}}Copy the code