循环依赖指模块间相互引用形成闭环,导致导出未初始化而出现undefined。其发生原因是模块A导入模块B时,B又导入了A,此时A尚未执行完毕,导出未完成建立。在CommonJS中,require同步加载并缓存exports对象,若模块未执行完则返回部分填充的对象,造成aValue为undefined。解决方法包括延迟访问(如setTimeout),但推荐重构代码。ES Module通过“活绑定”机制提前建立导入导出链接,允许后期更新值,虽更安全但仍可能读取到undefined。避免循环依赖的根本是优化设计:将共用逻辑抽离至第三方模块、使用函数或getter延迟访问、避免顶层依赖、采用类或对象注入等方式降低耦合。关键在于明确模块职责,减少强依赖,从而有效规避风险。

JavaScript 模块化中,循环依赖是指两个或多个模块相互引用,形成闭环。这种情况在大型项目中很常见,处理不当会导致 undefined 导出、运行时错误或难以调试的问题。理解其机制并掌握应对策略非常关键。
循环依赖是如何发生的?
假设模块 A 导入模块 B,而模块 B 又导入了模块 A:
// a.jsimport { bValue } from './b.js';
export const aValue = 'A';
console.log(bValue); // undefined? // b.js
import { aValue } from './a.js';
export const bValue = 'B';
console.log(aValue); // undefined?
当执行到 b.js 中的 import { aValue } 时,a.js 尚未执行完毕,导出还未完全建立,因此 aValue 是 undefined。这就是循环依赖引发的问题。
CommonJS 中的表现(Node.js 早期)
在 CommonJS 中,模块通过 require 同步加载。一旦模块开始执行,它的 exports 对象就被缓存。如果此时另一个模块又 require 了它,会得到一个尚未完全填充的 exports 对象。
立即学习“Java免费学习笔记(深入)”;
// a.js (CommonJS)const { bValue } = require('./b');
exports.aValue = 'A'; // 注意:exports 是逐步赋值的 // b.js (CommonJS)
const { aValue } = require('./a'); // 此时 aValue 还没定义
exports.bValue = 'B';
结果是 aValue 在 b.js 中为 undefined。解决方法之一是延迟访问:
// b.js 改写let aModule;
setTimeout(() => {
aModule = require('./a');
console.log(aModule.aValue); // 正确输出
}, 0);
但这不是推荐做法,应优先重构代码结构。
ES Module 中的处理机制
ES Module 使用“链接”阶段提前建立导入/导出绑定,即使模块未执行完成,也能保留正确的引用关系。这称为“活绑定”(live bindings)。
// a.mjsimport { bValue } from './b.mjs';
export const aValue = 'A';
console.log('a:', bValue); // 可能输出 undefined,但不会报错 // b.mjs
import { aValue } from './a.mjs';
export const bValue = 'B';
console.log('b:', aValue); // undefined,因为 a 还没执行完
尽管 ESM 提供了更安全的机制,但仍然可能读取到 undefined,尤其是在初始化阶段依赖对方导出值时。
如何避免和解决循环依赖
根本原则是优化设计,减少耦合。以下是实用建议:
- 重构公共逻辑:将共用部分提取到第三个模块中,由 A 和 B 分别引入
- 使用函数或 getter 延迟访问:不直接导入值,而是通过函数调用获取
- 避免在顶层依赖对方导出值:把依赖移到函数内部执行时再访问
- 使用类或对象注入:通过参数传递实例,而不是静态导入
例如:
// 解决方案:延迟访问// b.mjs
import { getAValue } from './a.mjs';
export const bValue = 'B';
console.log(getAValue()); // 调用时 a 已初始化 // a.mjs
import { bValue } from './b.mjs';
export const aValue = 'A';
export function getAValue() { return aValue; }
基本上就这些。循环依赖无法完全杜绝,但通过合理设计和理解模块加载机制,可以有效规避风险。关键是让模块职责清晰,减少彼此强依赖。










