How to understand static compilation of ES6?

Time:2022-5-14

How to understand static compilation of ES6?

<!– TOC –>

<!– /TOC –>

Please read it firstGo deep into es module and analyze its principle

The compilation execution of ES6 module has the following two characteristics:

  1. The Import command will beJavaScript engineStatic analysis takes precedence over other contents in the module.
  2. The export command will have the effect of variable declaration in advance.

Now, let’s explore:

  1. Why is the Import command statically analyzed by the JavaScript engine and executed prior to other contents in the module?
  2. Why does the export command have the effect of variable declaration in advance?

stayGo deep into es module and analyze its principleIn, it is clearly pointed out. In the browser / node environment, there will be a loader downloader to help us find and load all the files.

The details are as follows:
The loader must first judge the entry and exit file. In the HTML file, the loader can judge that it is an entry file by carrying the script tag of type = “module”.
<img width=”50%”>How to understand static compilation of ES6?

After the loader downloads the entry file, it will use a part of the import statement, which is also called “module specifier”. The “module specifier” will tell the loader where to find the next module.
In the browser, the browser will download the module file according to the “module specifier” (that is, a URL).

<img width=”50%”>How to understand static compilation of ES6?

Therefore, in this step, the Import command will be statically analyzed.
However, I am not sure whether it is statically analyzed by the JS engine or the loader downloader. (friends who know can contact me)

Second question: why does the export command have the effect of variable declaration in advance?
We know that after parsing the file, we will have an entry file and finally a series of module records.
<img width=”50%”> How to understand static compilation of ES6?

The next step is to instantiate the module and link all module instances.

First, the JS engine will create a “module environment record”.
This module environment record manages the variables of module record, and then it finds the “box” (memory address) of all exported variables in memory.
Module environment record will always monitor which box in memory is associated with which export.
<img width=”70%”>How to understand static compilation of ES6?

At this time, the boxes in these memory have not obtained their values. Only after the evaluation step is completed, the real values will be filled in.

In order to instantiate the module graph, the JS engine will perform a so-called depth first post order traversal operation. Which means,The JS engine will go to the bottom of the module diagram first — find those modules that do not depend on any other modules, and set up their export.(therefore, this step is the reason why the export command will have the effect of variable declaration in advance)

When the JS engine completes all export links of a module, it will return to the previous level to set the import from the module.
It should be noted that both export and import point to the same memory address.
Link export first to ensure that all imports can find the corresponding export.
<img width=”70%”>How to understand static compilation of ES6?

Es module uses the so-called “real-time binding”. Both the exported module and the imported module point to the same memory address.

At the end of this step, we link the memory addresses of the exported / imported variables of all module instances.

example

  • Case 1: Demo1 – Import command will beJavaScript engineStatic analysis, which takes precedence over other contents in the module

    // a.js
    console.log(‘a.js’)
    import { foo } from ‘./b’;

    // b.js
    export let foo = 1;
    console. Log (‘b.js execute first ‘);

    //Execution result:
    //B.js execute first
    // a.js

From the execution results, we can see intuitively that although the import in module a is introduced later than console But it is (‘a ‘)JS engine passedStatic analysis, referring to the front of module execution, is better than the execution of other parts of the module.

Because import is executed statically, import has the effect of promotion, that is, the position of the Import command in the module does not affect the output of the program.

  • Case 2: the demo2 – export command will have the effect of variable declaration in advance

    // a.js
    import { foo } from ‘./b’;
    console.log(‘a.js’);
    export const bar2 = () => {
    console.log(‘bar2’);
    }
    export function bar3() {
    console.log(‘bar3’);
    }

    // b.js
    export let foo = 1;
    import * as a from ‘./a’;
    console.log(a);

    //Execution result:
    // { bar: undefined, bar2: undefined, bar3: [Function: bar3] }
    // a.js

It can be seen intuitively from the above example that module a refers to module B, and module B also refers to module a. the variables declared by export are also superior to the execution of other contents of the module, but the specific assignment of variables needs to wait until the execution of the corresponding code.

You may still have questions. Why is B.js executed first and A.js executed later?
This is because the ES6 module is evaluated according to the rule of depth first reverse order. Therefore, the B.js module is executed first.

reference resources

Retention pit

  • How to understand commonjs runtime loading?

Social Info:

##(welcome to pay attention)
Github:
@huangyangquang | Latest technology tracking | JavaScript algorithm | Summary of early front-end knowledge + cases|Welcome, star ✨✨✨

Social:
Sina Weibo | Know | Nuggets | Si no

E-mail: [email protected]

Old Blog:CSDN

Wechat official account: front-end senior student Joshua

<img width=”50%”>How to understand static compilation of ES6?