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

Today, I will talk to you about JavaScript abstract concept, which may not be well understood by many people. In order to let you know more, Xiaobian summarized the following contents for you. I hope you can gain something according to this article.

Presumably, everyone is very confused when they see the title of this issue. Why is it simple and not simple? Let me explain first that some abstract concepts in JavaScript can be very complex, or extremely simple, or both.

Hmmm ~ recently reviewed these abstract concepts and found that some concepts were not well integrated before, so I wrote these relatively abstract and difficult concepts as several issues.

I personally feel that to understand abstract concepts better, we have to reduce comprehension and errors between authors and readers by visualizing images.

1. Execution context

1.1 JavaScript engine

When it comes to execution context, I have to pull JavaScript engine first. What is JavaScript engine? Considering that this article isn't specifically about JavaScript engines, Google it yourself. JavaScript engines are used to "interpret,""compile," and "execute" JavaScript code.

After all, the JS code written by developers can only be recognized by developers and handed over to the computer. Since the computer only recognizes binary, it needs a series of interpretations and transformations to understand and execute these JavaScript codes.

1.2 Execution stack

Deer Note: Ensure "order" of JavaScript code execution.

Since JavaScript engine can execute JS code, then in what order is it executed, and how to ensure that these orders are not disturbed. Let's start with a simple code:

var foo2 = function () { console.log('foo2'); } var foo1 = function () { console.log('foo1'); foo2() console.log ('foo 3')} foo1(); //Output: "foo1 foo2 foo3"

By executing the above code fragments, the output sequence is 'foo1 foo2 foo 3'.

Code execution, foo1() function first execution, first output 'foo 1', encounter foo2() function execution command, the execution right to foo2, foo2 function body execution, output'foo 2'. After foo2 finishes executing, it returns execution to foo1 function, and finally outputs 'foo3'

We can find out the rules of execution of the above code, the function executed first will exit last, and the function executed later will be executed first. This execution order is not the "stack" of "first-in-last-out"``"last-in-first-out" structure. JavaScript engines refer to this execution structure as the "execution stack", which is used to ensure the order of JavaScript code.

1.3 Execution Context (Exception Context)

Deer Note: Code to be executed is "modularized" -classification of execution context.

What is the execution context? Although it is difficult for us to understand the meaning of "execution context" directly, it is easy to understand what it specifically represents. Below, I will concretize the abstract concept of "execution context."

Above we have explained that JavaScript engine is to use the execution stack to ensure the execution order of the code, but the execution process needs to involve some variable scope definition (scope), closure and other complex situations, we need JavaScript engine to introduce a mechanism to solve these seemingly complex problems, so the concept of "execution context" came into being.

But what is the execution context? This has to remind me of the modular development of components, before a web application code from the top to the next file to write down thousands of lines of code, difficult to read, difficult to maintain, so there is a later modular development. Each module has its own functionality, its own local variables and styles.

We can understand JavaScript engine as a way to better interpret and execute code, so we introduce concepts like "execution context" of component modules to manage the complexity of runtime code.

2. Classification of execution context

Above we put the abstract "execution context" similar to the concrete concept of "module" for easy understanding. Of course, execution contexts, so-called "modules," also have different classifications, and here there are only two specific types,"global execution context" and "local execution context."

2.1 Global Exception Context

Global Context This "module" consists of two parts,"global object" and "this."

The following diagram is the most basic form of a global execution context. Contains a window object, and a this variable, and this variable is pointing to the window object, as shown in the print result on the right.

From this we can see that the execution context can be understood as a module (or fragment) of a collection of objects and variables in memory, which is why we can think of it as similar to a module (among other things).

Lu Note: For ease of understanding, the definition is summarized by myself. If there is any deficiency, please point out ~

2.2 local execution context

The local execution context is similar to the global execution context, but not exactly the same. In the local execution context of functions, there are two points to note:

Parameters passed into the function are stored as variables in the local execution context

The local context has an arguments parameter object (see). The local execution context is covered in detail in the following two phases.

3. Two stages of execution context

Whether it is a global execution context or a local execution context, it goes through two phases, namely "creation" and "execution".

We have a code that reads as follows:

var name = "fawn"; var age = 23; function getInfo(){ return { name: name, age: age }; }

3.1 Creation phase

The things to accomplish in the Creation phase are as follows:

Create a global object in heap memory--browser environment is windows, Node environment is Global

Let this variable point to this global object

Sets the memory space for variables and functions in the current execution context

Add the declared variable to memory (and hang it on the global object), assign undefined to the variable, and store the function in string form

Note: Left (1) diagram of the code executed, left (2) diagram of the state of execution context memory after the completion of the creation phase, right (1) diagram of the state of the global object during the creation phase.

Before executing code, JavaScript engines create a global execution context in heap memory, generate a global object, and then let this variable point to this variable. JavaScript finds the two variables name and age declared in the code, then requests memory space in the global execution context, stores the variable in that memory space, then assigns undefined to the variable, and the function is stored in memory as a string.

Note: The process of assigning undefined values to variable declarations at the creation stage is called variable promotion.

3.2 The Execution Phase

After the global execution context is created, it starts to change from Creation to Execution. The JavaScript engine starts running and executing the code line by line, assigning values to variables that were put into memory during the creation phase.

Note: Left (1) diagram of the executed code, left (2) diagram of the state of the execution context memory after the completion of the execution phase, right (1) diagram of the state of the global object during the execution phase.

The local execution context and global execution context are created and executed identically. But global execution contexts are created once, while function local execution contexts are created with each invocation of the function.

Again, the implementation results are as follows:

var name = "fawn"; var age = 23; function getInfo(name){ console.log(name); return { name: name, age: age }; } getInfo(name);

The local context execution state of the function is as follows:

Deer Note: Since there are no new variables defined in the function, there is no variable promotion here.

We understand what is the local context of the function. When the local context of the function is executed, the stack pull operation will be executed and the execution right will be handed over to the parent execution context (which may be the local execution context or the global execution context). The state of the getInfo function after execution is shown in the following figure.

At this time, the function is executed, the local execution context is popped and destroyed, and the execution right is handed over to the global execution context to continue executing other codes.

Since JavaScript is single-threaded and can only execute one task at a time, for the convenience of everyone to understand, the left (3) figure is the call of the execution stack. Of course, we can also see that the left (2) diagram simulates the operation of the execution stack in a nested manner, and each nested option is a new execution context in the stack.

Execution context is a very important concept in JavaScript, and in the next few advanced articles, concepts such as scope, scope, closure, and this will be linked to this article.

After reading the above, do you have any further understanding of what JavaScript abstractions are? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

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.