Shulou(Shulou.com)06/03 Report--

This article mainly explains the concept of "JavaScript execution context". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the concept of JavaScript execution context".

Execution context

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

There are three main types of execution context:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Global execution context: the global execution environment is the outermost execution environment. The global object in the browser is window, and this points to this object.

Function execution context: there can be countless functions that are created when they are called. Each call to the function creates a new execution context.

Eval execution context, rarely used.

Each execution context has three important attributes:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Variable objects (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 cannot access this object, the parser uses it in the background when processing data.

In the context of a function, active objects (activation object, AO) are used to represent variable objects. Active object and variable object are actually the same thing. Only when you enter an execution environment, the variable object of this execution context will be activated, which is called active object (AO), and only the properties on the active object can be accessed.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Chain of scope (scope chain): when contemporary code is executed in an environment, a chain of scopes of variable objects is created. The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has access to.

This

Lifecycle of execution context: create-> execute-> Recycle

1. Creation phase:

1.1 create a variable object:

Initialize the parameter arguments of the function

Function declaration

Variable declaration

Take a simple example to understand variable objects

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}

Variable promotion and function promotion are involved in the above examples, which have also been introduced in this article on understanding var, let and const from the bottom of JS.

1.2 create scope chain

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

1.3 determine the direction of the this

This part is divided into a variety of situations, you can see another article to understand this&call&apply&bind

two。 Execution phase

Execute variable assignment, code execution

3. Recovery stage

The execution context stack is reclaimed by the garbage collection mechanism. For more information about memory collection, you can check out V8 memory management and garbage collection mechanism

Execute context stack

The execution context stack is used to manage the execution context. After the execution context is created, the JavaScript engine pushes the execution context into the stack, which 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 ()

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

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

When the foo () function call is encountered, the JavaScript engine creates a foo function execution context and pushes it onto 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 pushes it onto the top of the current execution stack.

When the function bar finishes executing, its execution context pops up from the current stack, controlling the flow to the next execution context, the execution context of the foo () function.

When the execution of foo () is complete, its execution context pops up from the stack, and the control flow reaches the global execution context. Once all the code execution is completed, the javaScript engine removes the global execution context from the current stack.

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

Thank you for your reading, the above is the content of "the concept of JavaScript execution context". After the study of this article, I believe you have a deeper understanding of the concept of JavaScript implementation context, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.