This is the 8th day of my participation in the August Text Challenge.More challenges in August

The execution context is one of the links in the browser’s JS execution. Let’s analyze the process.

A, general

The execution context, which is only the currently executing environment, has two phases:

  • Create a stage
  • Execution phase

Second, the content

First we classify the environment in JS:

  • Global environment (after the js code is loaded, it enters the precompile, that is, into the global environment)
  • Function environment (when a function is called, it is entered into the function environment, different functions, different function environment)
  • evalEnvironment (not recommended because of safety and performance problems)

(I) Creation process

The process of creating an execution context is divided into three parts:

  1. determinethisPointer to (This Binding)
  2. The LexicalEnvironment component is created
  3. The VariableEnvironment component is created

1. thisPoint to (This Binding)

  • The global environment:
    • thisPoints to a global object, such as a browserthisPoint to thewindowsObject, while innodeJsIn the pointmoduleobject
  • Local (functional) environment:
    • thisDepending on how the function is called, default binding, implicit binding, explicit binding (hard binding),newBind, arrow functions. Such as:bind.apply.Arrow functionThese change the methods that this points to and so on.

2. LexicalEnvironment component creation

Lexical environment consists of two parts: environmental record and introduction record to external environment.

  • Environmental recordsWhere to store variable and function declarations in the current environment, includingargumentsObject.
    • Global environment record: Records all properties and method locations in the current environment.
    • Functional environment record: contains all attributes and methods defined within a function, as well as oneargumentsObject.
  • The external environment introduces records: Stores other environments that can be accessed through its own environment, somewhat like a chain of scopes.
    • Global external environment introduction: The external environment is introduced asnullBecause it’s its outermost environment.
    • Function external environment introduction: this can be the global environment or other function environment.
GlobalExectionContext = {// global execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: Outer: <null> // Reference to the external environment}} FunctionExectionContext = {// Function execution context LexicalEnvironment: {// Declarative: {// Declarative: {// Declarative: {// Declarative: {// Declarative: {// Declarative: {// Declarative: {// Declarative: { <Global or outer function environment reference> } }Copy the code

3. Create a VariableEnvironment component

The variable environment is also a lexical environment, so it has all the attributes of the lexical environment defined above. In ES6, the difference between lexical and variable environments is that the former is used to store function declarations and variable (let and const) bindings, while the latter is only used to store variable (var) bindings.

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

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

c = multiply(20, 30);
Copy the code

Variable promotion: During the creation phase, function declarations are stored in the environment and variables are set to undefined (in the case of var) or left uninitialized (in the case of let and const). So this is why it is possible to access variables defined by var (albeit undefined) before the declaration, but if you access variables defined by let and const before the declaration, you will be prompted with reference errors. This is called variable lifting.

(2) Execution process

Within each execution context, there are three important attributes:

  • Variable Object (VO)
  • Scope chain
  • this

Variable Object (VO)

Variable objects are execution context-specific data scopes that store variable and function declarations defined in the context. Variable objects are slightly different in different execution contexts.

  • The variable object of a global context is a global object
  • Function contextIn, we useActivation Object (AO)Denotes a variable object, the two are the same thing, but there are differences:
    • Variable objects (VO) are implemented in the specification or in the JS engine and cannot be directly accessed in the JS environment.
    • The variable object is only activated when an execution context is entered, hence the active object (AO), and the various properties on the active object can be accessed.

An active object is created when the function context is entered, and it is initialized via the function arguments property. Arguments property values are arguments objects.

The execution process can be divided into two parts:

  1. Enter execution context (analysis)
  2. Code execution (execution)

1. Enter the execution context

The code has not yet been executed, and the variable objects (or live objects) of the current environment include:

  1. All arguments to a function (if the current environment is a function environment) : The attributes and values of a variable object consisting of the name and corresponding values, or if no arguments are passedundefined
  2. Function declaration: All functions in the environment are defined by their names and corresponding values (function objects (function-object)) the attributes and values that make up a variable object, replaced if the variable object already contains attributes of the same name.
  3. Variable declaration: All variables in the environment, consisting of their names and corresponding values (undefined or undefined), constitute the properties and values of a variable object. If the variable name is the same as the declared parameter or function, it does not interfere with the existing properties.

2. Code execution

In this phase, the code is executed sequentially from top to bottom, and the values of the individual properties of the variable object are modified based on the code.

Take an example: a functional environment

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};
  b = 3;
}
foo(1);
Copy the code

When you enter the execution context, the AO(active object) is

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}
Copy the code

When it comes to code execution, the AO(active object) is

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}
Copy the code

Third, summary

The overall flow of executing the context looks like this:

  1. Creation phase:
    1. Determine the direction of this (this Binding)
    2. The LexicalEnvironment component is created
    3. The VariableEnvironment component is created

Basically, you initialize Variable objects.

Find all function declarations in the current environment find all variable declarations in the current environment Find all external references to the current environment (scope chain)

  1. Execution phase
    1. Assigns a value to an attribute in a variable object
    2. A function reference to a method in a variable object
    3. Execute the code

Get the values of all variables and functions in the environment, assign them to the variable object (or live object), and execute the code

I hope you can point out any questions in the comments section, AND I will correct them in time.

New people on the road, but also include more. I am MoonLight, a fledgling small front end.