Bedeutet das Importieren eines Moduls, dass der Code des Moduls in derselben Zeile wie die Importanweisung eingebettet wird?

Question

Von ReferenceError: Vor der Initialisierung kann nicht auf die lexikalische Deklaration „X“ zugegriffen werden – JavaScript MDN, hier ist ein Beispiel für einen ungültigen Import:

a.js (Einstiegsmodul):

import { b } from "./b.js";

export const a = 2;

b.js:

import { a } from "./a.js";

console.log(a); // ReferenceError: Cannot access 'a' before initialization
export const b = 1;

MDN erklärt:

In diesem Beispiel wird auf die importierte Variable a zugegriffen, sie wird jedoch nicht initialisiert, da die Auswertung von a被访问，但是未初始化，因为a.js的评估被当前模块b.js durch die Auswertung des aktuellen Moduls

blockiert wird.

a.jsIch verstehe darunter, dass das Importieren eines Moduls das Einbetten des Modulcodes in die Zeile der Importanweisung bedeutet. Mit anderen Worten: Beim Kompilieren wird

so:

console.log(a); // ReferenceError: Cannot access 'a' before initialization
const b = 1;

const a = 2;

a.jsIst dieses Verständnis richtig? Ich sehe dies nicht in import - JavaScript MDN erklärt. Aufgrund der variablen Heraufstufung weiß ich nicht, wie ich das testen soll, da das Neuanordnen der Zeilen in

das Ergebnis nicht ändert. 🎜

Answer 1

从导入的模块中的代码不仅仅是嵌入（"粘贴"），而是存在于一个独立的闭包中。虽然这肯定是一个过度简化，但我将模块与函数进行比较，将export语句与其return语句进行比较：

function a_js() {
  var b = b_js(); // 不必要的行
  return 2;
}

function b_js() {
  var a = a_js();
  console.log(a);
  return 1;
}

<button onclick="a_js()">import a.js</button>
<button onclick="b_js()">import b.js</button>

因为模块相互导入，它们不能以任何顺序加载：按下任何按钮都会导致"Maximum call stack size exceeded"错误。

但是如果你删除不必要的行（只是填充一个然后被丢弃的局部变量），它就可以工作。