JS模块导入变量疑问：未初始化不可访问及赋值后显示undefined

让我们一步步拆解你遇到的这两个模块导入问题，核心原因都是ES模块的绑定规则和循环依赖下的初始化顺序导致的：

问题1：导入变量时出现“Cannot access before initialization”错误 #

这个错误的根源是ES模块的暂时性死区（TDZ）机制。ES模块的导入不是值拷贝，而是和导出模块的变量建立实时绑定。当两个模块形成循环依赖（比如你的index.js导入log.js，log.js又导入index.js的test）时，如果在被导入变量完成初始化之前，就在顶层代码中直接访问它，就会触发这个错误。

举个例子，如果你的log.js代码改成这样：

import { test } from './index.js';
console.log(test); // 这里会直接抛出"Cannot access 'test' before initialization"错误
export default function log() {
  console.log(test);
}

此时log.js执行顶层代码时，index.js还没运行到export var test = 'Hello'这行，test的绑定已经存在，但还未完成初始化，处于暂时性死区，不允许被访问。

问题2：函数中能打印导入的变量，但顶层赋值给另一个变量时显示undefined #

这完全是模块执行顺序和变量初始化时机的问题，我们结合你的代码梳理整个执行流程：

1. 浏览器加载index.js（因为它是入口模块且类型为module），发现它导入了log.js，于是优先加载并执行log.js。
2. 执行log.js的顶层代码：
   • 首先建立与index.js中test变量的绑定，但此时index.js还未执行到初始化test的代码，所以test处于未初始化的TDZ状态。
   • 执行var x = test + ' Word'：此时test的初始值是undefined，所以x被赋值为undefined Word。
   • 定义并导出log函数（函数声明会被提升，但函数内部的代码要到调用时才会执行）。
3. 回到index.js继续执行：
   • 执行export var test = 'Hello'：此时test完成初始化，绑定的值更新为'Hello'。
   • 调用log()函数：
     • 函数内部访问test时，test已经完成初始化，所以能正常打印出Hello。
     • 而x是在log.js顶层就已经赋值完成的变量，它的值不会随着后续test的更新而改变，所以打印的是之前的undefined Word。

实用解决建议 #

• 尽量避免模块间的循环依赖，这是最根本的解决办法。
• 如果无法避免循环依赖，确保访问导入变量的代码延迟执行（比如放到函数内部，像你的log函数那样），等到变量完成初始化后再访问。
• 可以把共享变量抽离到一个独立的模块中，让两个模块都导入这个独立模块，避免直接循环依赖。

内容的提问来源于stack exchange，提问作者Anas Almohana