ES模块中出现变量初始化前被访问报错，求原因及解决方法

问题代码结构 #

index.html #

<canvas></canvas>

main.js #

import Class from "./module.js"
export const canvas = document.querySelector("canvas") 
const obj = new Class(args)

module.js #

import { canvas } from "./main.js"
const c = canvas.getContext("2d")

export default class Class{
// 类内部代码
}

错误信息 #

运行时抛出错误：

Uncaught ReferenceError: Cannot access 'canvas' before initialization（在module.js中）

错误原因 #

这是循环引用+变量初始化顺序导致的问题：

1. ES模块的import是静态解析的，执行顺序为先处理所有import语句，再执行模块内部代码。
2. 当main.js导入module.js时，module.js会优先执行，此时它尝试导入main.js中的canvas变量。
3. 但main.js里的canvas是在import Class之后才声明并赋值的，此时canvas还处于未初始化状态，module.js访问它时就会触发报错。

解决方案 #

方案一：将canvas作为参数传入类的构造函数 #

彻底消除循环引用，把依赖通过参数传递：
修改main.js：

import Class from "./module.js"
export const canvas = document.querySelector("canvas") 
// 将canvas作为参数传入Class实例
const obj = new Class(canvas, args)

修改module.js：

export default class Class{
  constructor(canvas, args){
    // 在构造函数中获取绘图上下文
    this.c = canvas.getContext("2d")
    // 其他初始化代码
  }
  // 类的其他方法
}

方案二：在module.js中直接获取canvas #

如果不需要在main.js之外共享canvas变量，也可以让module.js自己获取DOM元素：
修改module.js：

const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")

export default class Class{
// 类内部代码
}

这两种方案都能避免循环引用导致的初始化顺序问题，同时保持代码简洁性，比使用动态import的效率更高。

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