What is the execution context?

A: In short, an execution context is an abstraction of the context in which Javascript code is evaluated and executed. Whenever Javascript code is running, it is running in the execution context.

What is the type of execution context?

A: All program code in Javascript only lives in two environments, one is global and the other is local. In browsers, this in the global environment refers to the global object window; The local environment refers to the inside of the code block, which includes: inside the function, inside the code block of the object declared by the literal, and so on.

There are three types of execution contexts:

  • One is the global execution context, in which any code that is not inside a function is executed. The global execution context does two things: creates a globalwindowObject (hosted by a browser) and sets the value of this to be equal to the global object. There is only one global execution context in a program.
  • The second is the internal execution context of the function. Each time the function is called, the execution context of the function will be created, and the execution context will be destroyed when the function is finished. So, if the same function is called multiple times, an execution context is created each time.
  • The third is the internal execution context of eval(). Code executed inside eval() also has its own execution context. However, eval() is rarely used by developers, so we won’t discuss it in detail here.

What is the execution stack?

A: An execution stack, also known as a “call stack” in other programming languages, is a stack with LIFO (LIFO) data structures that are used to store all execution contexts created while the code is running.

Whenever Javascript began to perform, it will create a global execution context, and pressed the global execution context into the stack (at this point the execution of the stack being global execution context only, can understand global execution context is at the top of the stack and at the end of the stack), and when executing code in the function call (refers to perform a function, Rather than define a function) will create a new execution context and pressure into the stack, and then enter the function executes inside functions within the code, if the internal function call other functions, so will also create a new execution context, and pressure into the stack until completion of the function, and according to the order from the stack and the stack. Here’s an example:

let a = 'Hello World! '; Function first(){console.log(' inside the first method '); second(); Consle.log (' second time inside first method '); } function second(){console.log(' inside the second method '); } first(); Console. log(' inside the global execution context ');Copy the code

The execution result is:

Inside the first method inside the second method and the second time inside the first method inside the global execution contextCopy the code

The associated stack logic can be seen in this figure:

As you can see from the code diagram above, script execution starts by pushing a global execution context onto the stack. Then, when function first() is called, the first() execution stack is pushed to the bottom. During first() execution, first() calls function second() internally. So second() is pushed to the bottom of the stack, second() is pushed out of the stack, first() is pushed out of the stack, and then first() is pushed out of the stack, and finally the whole code is finished and the global context is pushed out of the stack. The above explanation and examples should help us understand the order in which functions are called, especially between functions that have nested relationships (of course, don’t let two functions call each other, otherwise the call won’t end and the browser may crash).

How to create execution context?

A: There are two phases to creating an execution context: the creation phase and the execution phase.

Create a stage

Three things happen during the creation phase:

  1. The determination of the this value, known as the This binding.
  2. Create the lexical environment component.
  3. Create the variable environment component.

Where this in the global execution context points to the window (in the browser context); The this of the function execution context depends on how it is called. If the function is called directly, its this will be set to window (undefined in strict mode), otherwise it will refer to the object when called, as in second(), which is called by first(), whose this refers to first().

Creating a lexical environment component and creating a variable environment component are two obscure points that I don’t fully understand, so I won’t go into them again to avoid misdirection.

Execution phase

This is the easiest part of the whole article. At this stage, all of these variables are allocated and the code is executed.

References, suggested reading articles

  1. Understand the execution context and execution stack in JavaScript