Teach you step by step to understand the execution context in JS

This article will take you step by step to deeply understand the execution context in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Only by understanding the execution context can we better understand the JavaScript language itself, such as variable promotion, scope, closure, etc.

Execution Context

The execution context is the execution environment of the current code.

There are three main types of execution context:

• Global execution context: The global execution environment is the most peripheral execution environment. In the browser The global object is window, this points to this object

• Function execution context: there can be countless, they will be created when the function is called. Each function call creates a new execution context.

• eval execution context, rarely used.

Each execution context has three important attributes:

• Variable object, VO): Each execution environment has a variable object associated with it, and all variables and functions defined in the environment are stored in this object. Although the code we write has no access to this object, the parser uses it behind the scenes when processing the data.

In the context of a function, use an activation object (AO) to represent a variable object. Active objects and variable objects are actually the same thing. Only when entering an execution environment, the variable object of this execution context will be activated. At this time, it is called an active object (AO). Only the properties on the active object can be accessed.

• Scope chain (scope chain): When code is executed in an environment, a scope chain of variable objects is created. The purpose of the scope chain is to ensure ordered access to all variables and functions that the execution environment has access to.

• this

Life cycle of execution context: Create-> Execute-> Recycle

1. Creation phase:

1.1 Create variable object:

• Parameter arguments of the initialization function
• Function declaration
• Variable declaration

A simple example to understand the variable object

function getName(name) {
    var b = 2;
    function foo() {};
    var bar = function() {};

}
getName('lucystar')

The AO at this time is roughly as follows

AO = {
    arguments: {
        0: 'lucystar',
        length: 1
    },
    name: 'lucystar',
    b: undefined,
    foo: reference to function foo(){},
    bar: undefined
}

The above example It involves variable promotion and function promotion. It was also introduced in Understanding var, let, and const from the bottom of JS in this article

1.2 Creating a scope chain

The scope of a function is determined when the function is defined. The scope chain itself contains variable objects. When looking for a variable, it will first search from the variable object in the current context. If it is not found, it will search from the variable object of the parent execution context until it finds the variable object of the global execution context.

1.3 Determine the direction of this

This part is divided into many situations. For details, you can check another articleUnderstanding this&call&apply&bind

2. Execution phase

Execute variable assignment and code execution

3. Recycling phase

Execution The context is popped off the stack and recycled by the garbage collection mechanism. Regarding the content of memory recycling, you can view V8 Memory Management and Garbage Collection Mechanism

Execution Context Stack

The execution context stack is used to manage execution contextual. After the execution context is created, the JavaScript engine will push the execution context into the stack. This stack used to manage the execution context is usually called the execution context stack, also known as the call stack.

let a = 'javascript';

function foo() {
    console.log('foo');
    bar();
}
function bar() {
    console.log('bar');
}
foo();

• When the above code is loaded in the browser, the JavaScript engine creates a global execution context and pushes it into Current execution stack.

• When encountering a foo() function call, the JavaScript engine creates a foo function execution context and pushes it to the top of the current execution stack.

• When the bar() function is called from inside the foo() function, the JavaScript engine creates a bar function execution context and places it Pushed to the top of the current execution stack.

• When the function bar is executed, its execution context will be popped from the current stack, and the control flow reaches the next execution context, which is the execution of the foo() function context.

• When foo() completes execution, its execution context is popped from the stack, and control flow reaches the global execution context. Once all code execution is completed, the javaScript engine removes the global execution context from the current stack. Execution context.

Why are basic data types stored on the stack and reference data types stored on the heap? The JavaScript engine needs to use the stack to maintain the state of the context during program execution. If the stack space is large, all data will be stored in the stack space, which will affect the efficiency of context switching and thus the execution efficiency of the entire program.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Teach you step by step to understand the execution context in JS. For more information, please follow other related articles on the PHP Chinese website!