Detailed introduction to JavaScript execution context (with code)

This article brings you a detailed introduction to JavaScript execution context (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

As mentioned in "In-depth Learning of JS - Execution Context Stack", when JavaScript code executes a piece of executable code (executable code), a corresponding execution context (execution context) will be created

For each execution context, there are three important attributes:

Variable object VO
Scope chain
this

In this article we Combining the content of these three parts, let's talk about the specific processing process of execution context.

Thinking Question

In "In-depth Learning of JS - Lexical Scope and Dynamic Scope", this question is raised:

// 思考题一：
var scope = "global scope";
function checkscope(){
  var scope = "local scope";
  function f(){
    return scope;
  }
  return f();
}
checkscope();

// 思考题二：
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

Both pieces of code will print local scope, but there are still some differences. This article will analyze the specific change process of execution context stack and execution context in detail.

Detailed analysis

We analyze the first piece of code:

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

The execution process is as follows:

1. Execute the global code and create a global execution context,The global context is pushed into the execution context stack

ECStack = [
  globalContext
];

2. Global context initialization

globalContext = {
  VO: [global],
  Scope: [globalContext.VO],
  this: globalContext.VO
}

2. During initialization, the checkscope function is created and the scope chain is saved inside the function. Attribute[[scope]]

checkscope.[[scope]] = [
  globalContext.VO
];

3. Execute the checkScope function to create the checkScope function execution context. The checkScope function execution context is pushed into the execution context stack:

ECStack = [
  checkscopeContext,
  globalContext
];

4. The checkscope function executes context initialization:

1. Copy the function [[scope]] attribute to create a scope chain,
2. Use arguments to create an active object,
3. Initialize the active object, that is Add formal parameters, function declarations, and variable declarations,
4. Push the active object into the top of the checkscope scope chain,

At the same time, the f function is created, and the scope chain is saved to the internal properties of the f function[[scope]]

checkscopeContext = {
  AO: {
      arguments: {
        length: 0
      },
      scope: undefined,
      f: reference to function f(){}
  },
  Scope: [AO, globalContext.VO],
  this: undefined
}

5. Execute f function, create f function execution context, f function execution context is pushed into the execution context stack

  ECStack = [
    fContext,
    checkscopeContext,
    globalContext
  ]

6. f function execution Context initialization, the following is the same as step 4:

1. Copy function[[scope]] Create scope chain with attributes
2. Create active object with arguments
3 .Initialize the active object, that is, add formal parameters, function declarations, and variable declarations
4.Push the active object to the top of the f scope chain

  fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
    this: undefined
  }

7. When the f function is executed, search for scope along the scope chain value, return scope value

8. After the f function is executed, the f function context is popped from the execution context stack

ECStack = [
  checkscopeContext,
  globalContext
]

9. After the checkscope function is executed, the checkscope execution context is popped from the execution context stack

ECStack = [
  globalContext
]

The above is the detailed content of Detailed introduction to JavaScript execution context (with code). For more information, please follow other related articles on the PHP Chinese website!