循环引用导致的undefined问题

问题描述

两个JS文件存在循环import时，将导致undefined问题

import Type from "./test"
console.log(Type.Image);    //这里报错，说Type是个undefined，不能去取它的Image属性

原因分析

如下两个js，假定先加载a.js:

//a.js
console.log("before import b")
import {b} from "./b"
console.log("b is " + b)
export let a = b+1;

//b.js
console.log("before import a")
import {a} from "./a"
console.log("a is " + a)
export let b = a+1;

结果是

before import a
a is undefined
before import b
b is NAN

这里有一个有趣的现象就是第一句输出并不是before import b，也就是虽然import语句在后面，但确会更早执行，当执行import b时，加载并运行b.js，从而第一句输出是before import a。

然后就是当运行b.js时，发现又需要import a.js，此时不会再去加载a.js了，而是认为整个a.js模块是{}，所以a的值就是undefined了。

如何避免

对于像constants, enum, global等一些需要立即执行的模块，定义Constants.js公共文件，从而避免循环依赖。

参考

Module 的循环加载