Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

⭐ ⭐ ⭐

A:

An execution context is the context in which JavaScript executes a piece of code. It contains environmental information such as this, variables, objects, and functions used during the execution of the code.

As long as Javascript code is running, it must be running in an execution context.

There are three types of execution context:

  • Global execution context: There is only one, the global object in the browserwindow Object,thisPoint to this global object
  • Function execution contexts: There are an infinite number of them, which are created only when a function is called, and a new execution context is created each time a function is called
  • Eval function execution context: refers to the context in which the Eval function is executedevalThe code in the function, rarely used and not recommended, is not covered in this article.

Analysis of the

What is the environment? Why do people live on the earth instead of the moon? It is because the earth has air, water, food and other things on which people live, but the moon does not have them.

What is the environment in which the code runs? JS code can be executed normally, it needs to use a series of information, such as variables, scope, this value, these information is the rules defined by the designer of JS language, and all the information required by a code execution is defined as the execution context.

In what order is a piece of JS code parsed and executed? When are those variables defined in the code? How are the intricate access relationships between variables created and linked? To explain these issues, it is important to understand the concept of JS execution context.

Perform the context creation process

When a piece of code is executed, the JavaScript engine first compiles it and creates the execution context.

For one thing, machines can’t read high-level language code directly. It has to be translated into machine language that computers can read.

JS is an interpreted language, and the process of converting code is as follows:

Converting the source code into an abstract syntax tree generates the execution context, the creation phase of the execution context, where the this value is determined and the lexical and variable environments are created.

For example, a piece of code like this,

var x = 2
function sum(){
  var y = 10
  return  x + y
}
sum()
Copy the code

Before the sum() function is executed, the JavaScript engine creates a global execution context for the code above, containing declared functions and variables, as shown below:

As you can see from the figure, global variables in the code are stored in the variable environment of the global context, and functions are stored in the lexical environment.

Once the execution context is ready, the global code is executed. When sum is executed, JavaScript determines that this is a function call and does the following:

  • First, extract the sum function code from the global execution context.
  • Second, compile the sum code and create the execution context and executable code for the function.
  • Finally, execute the code and print the results.

The complete process is as follows:

Extension: Combine pseudo-code analysis to create phase

The execution context has been iterated over many releases, and this article examines the execution context in the ES5 release.

The execution context creation phase does three things:

  • Determine the value of this, also known asThis Binding
  • A LexicalEnvironment is created
  • A VariableEnvironment is created
/ / pseudo code
ExecutionContext = {  
  ThisBinding = <this value>// Make sure this LexicalEnvironment = {... }, // lexical environment VariableEnvironment = {... }, // Variable environment}Copy the code

To determine this

The value of this is checked at execution time, not at definition.

The this of the global context points to the window.

The this reference to a function context is not fixed and depends on where the function is called and how it is called, which can be summarized as follows:

For more on this, see my article “Front-end Daily Question (24)” to talk about this in JS

Lexical environment

The lexical environment has two components:

  • Global environment: is a lexical environment with no external environment, whose external environment is referenced as null, has a global object,thisThe value points to the global object
  • Function environment: Variables defined by the user in the function are stored in the environment record, containingargumentsObject, a reference to an external environment can be a global environment or an external function environment containing an internal function

The pseudocode is as follows:

/ / pseudo code
GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object".// Bind the identifier here
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative".// Bind the identifier here
    }
    outer: <Global or outer function environment reference>}}Copy the code

The variable environment

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

For example

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

The execution context is as follows:

/ / pseudo code
GlobalExectionContext = {

  ThisBinding: <Global Object>, LexicalEnvironment: {// lexical EnvironmentRecord: {Type: "Object", // identifier binding here a: < uninitialized >, b: < uninitialized >, multiply: < func > } outer: <null> }, VariableEnvironment: {// variable EnvironmentRecord: {Type: "Object", // identifier binding here c: undefined,} outer: <null> } } FunctionExectionContext = { ThisBinding: <Global Object>, LexicalEnvironment: { EnvironmentRecord: { Type: "Declarative", // Arguments: {0:20, 1:30, length: 2},}, outer: <GlobalLexicalEnvironment>}, VariableEnvironment: {EnvironmentRecord: {Type: "Declarative", undefined }, outer: <GlobalLexicalEnvironment> } }Copy the code

Note that the variables a and b defined by let and const are not assigned at the creation stage, but the variables declared by var are assigned to undefined from the creation stage.

This is because, during the creation phase, variable and function declarations are scanned in the code and then stored in the environment.

But variables are initialized as undefined(in the case of var declarations) and uninitialized(in the case of let and const declarations).

This is the actual reason for variable promotion.

Reference article:

Understand the execution context and execution stack in JavaScript

At the end

It doesn’t matter if you don’t understand it. It doesn’t affect you to continue to be an API engineer.

But understand still a little help, give me the feeling is, looked up a lot of information, after the concept of these eight-part essay barely understand, a lot of knowledge points are connected.

If my article is helpful to you, your 👍 is my biggest support ^_^

You can also follow the front End Daily Question column in case you lose contact

I’m Allyn, export insight technology, goodbye!

The last:

What is the difference between the arrow function and the normal function?