JavaScript中跨文件修改导出对象后内容丢失的问题

这个问题我之前也碰到过，大概率是模块导出导入的方式搞错了，还有可能是代码执行顺序的问题，咱一步步捋：

1. 最关键的错误：命名导出 vs 默认导出不匹配 #

你在A.js里用的是export const obj1 = {}，这属于命名导出，但B和C里写的import obj1 from "A"是在导入默认导出——这俩根本不是一回事！

换句话说，B里操作的obj1根本不是A里定义的那个空对象，而是A模块的默认导出（你没定义，所以其实是undefined），自然修改不会影响到A里的obj1，C导入的时候拿到的还是A里的初始空对象。

修正导入方式 #

把B和C里的导入改成命名导入，用大括号包裹：

B.js 修正后

import { obj1 } from "./A"; // 注意路径要正确，同目录的话要加./

function someFunction() {
  const obj2 = { name: "test", value: 123 }; // 假设你的obj2是这样
  Object.assign(obj1, obj2);
  console.log(obj1); // 这里现在操作的就是A里的obj1了
}

C.js 修正后

import { obj1 } from "./A";

// 这里要确保someFunction已经执行过再访问obj1
console.log(obj1);

2. 第二个注意点：确保代码执行顺序 #

就算导入改对了，如果你在C.js里访问obj1的时候，B里的someFunction还没执行，那看到的还是初始空对象。比如如果你的应用是先加载C.js，再调用B的someFunction，那肯定不行。

解决办法就是确保someFunction在C使用obj1之前执行：

• 如果是浏览器环境，可以在入口文件先调用someFunction，再初始化C相关的代码；
• 如果是Node.js，可以在B模块里直接调用someFunction，或者在入口文件控制执行顺序。

验证一下 #

改完之后，你可以在B里调用someFunction，然后在C里打印obj1，就能看到obj2的内容了——因为ES模块里导入的是对象的引用，修改对象的属性会同步到所有导入它的模块里。

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