The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the tenth cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

The JavaScript standard defines all information required for the execution of a piece of code (including functions) as the “execution context” (which can be understood as the execution environment of the current code. The same function executed in different environments will produce different results depending on the data accessed), which is the execution infrastructure. Execution context contains a lot of content, the following from the type, contain content, life cycle, execution process, conclusion.

10.1 type

There are three main execution contexts: global execution context, function execution context, and eval function execution context.

  1. Global execution context

When JavaScript executes global code, the global code is compiled and the global execution context is created, and there is only one global execution context for the lifetime of the page.

  1. Function execution context

When a function is called, the code inside the function is compiled and the function execution context is created. Generally, the function execution context is destroyed when the function is finished.

  1. Eval Execution context

When the eval function is used, the eval code is also compiled and the execution context is created.

10.2 Contents

Execution context is defined differently in different versions, which is summarized in Relearning the Front End. There are three main versions:

  1. The execution context, in ES3, consists of three parts.
  • A scope chain is also called a scope chain.
  • Variable object: a variable object used to store variables.
  • This value: This value.
  1. In ES5, we improved the naming by changing the first three parts of the execution context to look like this.
  • Lexical environment: lexical environment, used when fetching variables. (Variables created by let, const, with (), try-catch exist in lexical context)
  • Variable environment: used when declaring variables. (Variables declared by var or function () {} exist in the variable environment)
  • This value: This value.
  1. In ES2018, the execution context is again like this, subsumed by the lexical Environment, but with a few additions.
  • Lexical environment: lexical environment, used when fetching variables or this values.
  • Variable environment: used when declaring variables
  • Code Evaluation State: Used to restore the code execution location.
  • Function: used when the task being executed is a Function.
  • ScriptOrModule: used when executing a ScriptOrModule, indicating the code being executed.
  • Realm: Base libraries and built-in object instances to use.
  • Generator: Only the Generator context has this property, indicating the current Generator.

10.3 Execution context lifecycle

In the execution Context Lifecycle section (which will follow the ES3 phases, because I feel that the definitions of the following nouns are more comprehensive, but really not easy to memorize), there are two phases, the creation phase and the execution phase, each of which is responsible for different things. (Note: Each part is a question. See the following 100 questions for detailed explanation.)

  1. Create a stage

The creation phase is mainly responsible for generating variable objects, establishing scope chains, and determining the this point.

  1. Code execution phase

Once the creation is complete, the code is executed, which is when variable assignments, function references, and other code are completed.

10.4 Code execution process

Baitizhen [008-009] introduces the code and function execution process, but this introduction is only from the macro aspect, and there is no detailed introduction. The following will elaborate on the code execution process from the point of view of the call stack.

  1. Create the Global EC. Push it to the bottom of the stack;

  2. The global execution context (Caller) is executed line by line top-down. When a function is encountered, the function execution context (Callee) is pushed to the top of the execution stack;

  3. The function execution context is activated as active EC, which starts executing the code in the function. Caller is suspended.

  4. After the function is executed, callee is removed from the stack by POP, and control is returned to the global context (Caller) to continue execution.

An example is given below to illustrate this process.

var a = 1;
function f1() {
    / /...
}

function f2() {
    f1();
    / /...
}

f2();
Copy the code

The call stack for the above code looks like this:

  1. The global execution context is first created and pushed to the bottom of the stack. Where variable A, functions F1 and F2 will be stored in the variable environment of the global execution context;
  2. When function F2 is called, the corresponding function execution context will be created and pushed onto the call stack. After the execution context of function F2 is created, the code execution stage will be entered.
  3. During the execution of function F2, function F1 will be called, and the corresponding function execution context will be created and pushed into the call stack. F1 in the execution stage;
  4. When the f1 function returns, the execution context of the function pops off the top of the stack;
  5. The f2 function returns, and its execution context pops up from the top of the stack.
  6. At this point code execution is closed and context destruction is performed globally when the page is finished.

10.5 the conclusion

Knowing the execution context, there are a few conclusive things to keep in mind

  1. Only the context at the top of the call stack is executing; the other contexts need to wait;

  2. There is only one global context, which is pushed out when the browser closes;

  3. There is no limit to the number of execution contexts for a function;

  4. Each time a function is called, a new execution context is created for it and pushed onto the call stack, and the JavaScript engine then executes the function code, even for the called function itself;

  5. After the current function completes execution, the JavaScript engine pops the execution context of that function out of the stack.

  6. A “stack overflow” problem occurs when the allocated call stack space is used up.

Take a look at

1. If you think this article is good, share and like it so that more people can see it

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred.