JavaScript 如何解决循环依赖

你有没有试过用外卖软件同时点两家不同的奶茶店？结果两家都告诉你，要等对方先出餐自己才能做——最后你喝到的不是奶茶，是哭笑不得的“循环等待”。这种在生活里让人摸不着头脑的死循环，放到编程里，就是我们常说的“循环依赖”。而JavaScript作为前端开发里最常用的编程语言，每天都要和这种依赖问题打交道，今天就用大家能看懂的例子，聊聊它是怎么解决这个麻烦的。

什么是JavaScript里的循环依赖？

先举个贴近前端开发的小例子：你写了两个JS文件，a.js里要用到b.js里的函数，b.js里又要调用a.js里的变量。比如：

a.js里写import { bFunc } from './b.js'; const aVar = 10; bFunc();，

b.js里写import { aVar } from './a.js'; export function bFunc() { console.log(aVar); }。

当浏览器或Node.js加载这两个文件时，a.js要等b.js加载完才能运行，b.js又要等a.js加载完，就陷入了“谁都先动不了”的死循环——这就是JavaScript里的循环依赖。

JavaScript怎么“拆”循环的死局？

你可能会问，既然两个都要等对方，那加载到一半的文件里的东西，能不能先拿一部分用？JavaScript的模块系统就是这么做的，它没有等整个模块加载完才输出内容，而是做了一个“半成品”的过渡。

比如用ES模块（现在前端最常用的import/export），当加载a.js时，它需要b.js的bFunc，于是先暂停加载，去拿b.js；b.js需要a.js的aVar，这时候a.js已经加载了一半，aVar虽然还没赋值，但JS会先给它留个“占位”的引用——bFunc调用的就是这个占位，不会出错。等a.js加载完，把aVar的值填进去，整个流程就顺了。

用“合理拆分”避免死循环

除了靠模块系统的“半成品机制”解决已经出现的循环依赖，更重要的是从源头避免它。就像你不会同时点两家互相等的奶茶，开发时也别把两个模块拆得太碎、互相依赖。

比如刚才的例子，你可以把a.js里的公共变量aVar单独放到c.js，让a.js和b.js都从c.js拿东西，c.js不依赖任何一方，这样就没有死循环了。再比如写组件时，别让父组件和子组件互相传数据，而是抽离成一个共同的状态管理文件，就像你找朋友帮忙买奶茶，不用两家店互相等，找第三方跑腿就搞定了。

其实循环依赖本身不是洪水猛兽，JavaScript的模块系统早就悄悄帮我们处理了大部分小范围的死循环。真正需要注意的，是别因为代码结构混乱，让这种依赖从“小麻烦”变成“大bug”——毕竟，写代码和喝奶茶一样，清晰的结构才能让流程顺顺利利。