模块二次引用问题

[en-cheng-river]

在一个modules中通过const定义函数（函数表达式）并导出之后，另一个modules中引入这些被导出的const函数，并直接赋值给一个多级嵌套的对象的属性时，这个const定义的函数会为undefined；

示例

// modules 1
export const fn1 = () => 'fn1';

// modules 2
import { fn1 }  from './modules 1'
const Obj = {
  A: {
     a: fn1
   }
}
console.log(Obj);
/*
 打印出来的值为：
{
  A:{
   a: undefined
  }
}

*/

情况分析 函数 fn 是 const 定义的情况下：

当你使用 const fn = () => {} 或 const fn = function() {} 定义函数时，fn 在模块加载时会被视为未初始化。这意味着，如果在模块加载过程中使用该函数的值，而模块还没有完全加载或函数还没有被初始化，它的值可能是 undefined。

函数 fn 是 function 定义的情况下：

当你使用 function fn() {} 定义函数时，函数声明会被提升（hoisting）到作用域的顶部，这意味着在模块加载之前，fn 已经被初始化为一个函数。这可以解释为什么你在这种情况下能正确打印出 Obj。

解决方案就是将函数定义改成使用function定义；