0

0

JavaScript中的模块循环依赖是如何被解析的?

betcha

betcha

发布时间:2025-10-09 11:52:02

|

872人浏览过

|

来源于php中文网

原创

循环依赖指模块A引用模块B的同时B也引用A,JavaScript通过先注册后执行的机制处理:ESM在加载时解析声明但不执行,遇到循环依赖时确保模块记录存在,执行时若依赖未完成则返回undefined。如a.js和b.js互相导入,先执行的模块中导入值为undefined,因对方尚未初始化。解决方式包括重构共用逻辑、使用函数延迟访问或避免顶层直接使用导入值。CommonJS同理,require可能返回未完整导出的对象。理解该机制可避免读取未初始化值的问题。

javascript中的模块循环依赖是如何被解析的?

JavaScript中的模块循环依赖是通过模块执行顺序导出绑定的延迟性来处理的。当两个或多个模块相互引用时,JavaScript引擎并不会让程序崩溃,而是采用一种“先注册、后执行”的策略来解析这种依赖关系。

什么是循环依赖?

循环依赖指的是模块A导入了模块B,而模块B又反过来导入了模块A。例如:

// a.js
import { bValue } from './b.js';
export const aValue = 'A';
console.log('In a.js, bValue is:', bValue);

// b.js
import { aValue } from './a.js';
export const bValue = 'B';
console.log('In b.js, aValue is:', aValue);

在这个例子中,a.js 和 b.js 相互导入对方,形成循环依赖。

模块解析机制如何应对循环依赖?

JavaScript 模块系统(ESM)使用静态分析 + 执行时机分离的方式来处理循环依赖:

立即学习Java免费学习笔记(深入)”;

  • 所有模块在加载时都会先创建一个模块记录,并解析导入/导出声明,但不会立即执行代码
  • 当发现循环依赖时,JavaScript 引擎会优先完成模块的初始化注册,然后按依赖链逐步执行
  • 如果某个模块还未执行完就被另一个模块导入,那么导入的值可能是尚未初始化的状态(如 undefined)

以上面的例子运行结果为例:

In b.js, aValue is: undefined
In a.js, bValue is: B

原因在于:a.js 先被触发执行 → 加载 b.js → 执行 b.js 中的导入 → 此时 a.js 还未执行到定义 aValue 的语句,所以 aValue 是 undefined。等 b.js 执行完毕后,再回到 a.js 继续执行,此时 bValue 已经可用。

uBrand
uBrand

一站式AI品牌创建平台,在线品牌设计,AI品牌策划,智能品牌营销;uBrand帮助创业者轻松打造个性品牌!

下载

如何安全处理循环依赖?

虽然 JavaScript 能解析循环依赖,但容易导致读取到未初始化的值。建议采取以下方式避免问题:

  • 重构代码结构:将共用逻辑提取到第三个模块中,打破循环
  • 使用函数或 getter 延迟访问:把需要导出的值包装成函数,确保调用时才读取
  • 避免在顶层直接使用导入的值进行计算:尤其是涉及副作用或日志输出时要小心

比如改写为函数导出:

// a.js
import { getBValue } from './b.js';
export const aValue = 'A';
console.log('In a.js, bValue is:', getBValue());

// b.js
import { aValue } from './a.js';
export function getBValue() {
  return 'B';
} export const bValue = 'B';

CommonJS 中的情况类似

Node.js 的 CommonJS 模块系统也有类似行为。require 返回的是模块的 exports 对象的浅拷贝,如果在模块执行完成前被引用,可能拿到的是部分导出内容。

例如,在 moduleA 中 require moduleB,而 moduleB 又 require moduleA,此时 moduleA 可能只导出了部分内容,甚至 exports 还是空对象。

基本上就这些。JavaScript 的模块系统能容忍循环依赖,但不代表应该放任不管。理解其解析机制有助于写出更稳健的代码。不复杂但容易忽略。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

466

2023.11.27

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

515

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

245

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5331

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

483

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号