First, let’s take a look at the diagrammatic code. Each comment actually represents a JS file. So here are actually three JS files. The first is the main file we want to run, followed by the a and B files.
It can be seen from the above that modules A and B reference each other, and the output result is as follows:
So how do you understand that?
First look at the main module, output main starting; Then the a module is called;
Then we go to module A and print a starting; B module is then called;
Then we go to module B and print b starting; Then call module A;
But the problem is that module A hasn’t been initialized yet, so module A returns an Unfinished copy, which you can interpret as returning an empty object {};
An export. done = flase; an export. done = flase;
This is different. Instead of an empty object, {done: flase}; But if the object is empty, undefined is printed;
So in b, a.done = flase; Then b module is run until finally b. Tone is output.
In a, b.tone = true; Done =true;
Then the following output is a. tone; Module A is finished.
At this point, both modules A and B have been loaded. Although module B is referenced again in main, it will not be executed.
Then finally we see the output in main, a.tone =true, b.tone =true.
variant
Let’s change the statements of modules A and B as follows:
We have deleted two of the sentences underlined in black. What is the output now?
See the picture below:
I’m not going to analyze it, but I’ll leave it to you.