同一个文件先后用 import 引入两个 js 文件，为什么后者无法直接调用前者？

Question

举个例子

// a.jsx 文件
import { useEffect } from 'react';
import { useMount } from "utils";
useMount() // 报错 'useEffect' is not defined  no-undef  

// utils 文件，在这个文件里不引入 useEffect
export const useMount = (callback) => {
  useEffect(() => {
    console.log('我执行了useMOunt');
  }, [])
}

我自己的理解是，因为在引入 useMount 之前已经引入了 useEffect 了，所以在调用时，通过作用域链的查找不是应该可以找到 useEffect 吗，为什么会出现未定义的错误，希望有大神可以解答我的疑问，感谢。

Answer 1

es6 模块的代码都是单独的作用域，utils 模块里面是无法访问 a.jsx 定义的变量的

// 编译后的文件, 伪代码

const react = (function () {
    const useEffect = () => {}
    return {
       useEffect,
    }
})()

const utils = (function () {
    const useMount = (callback) => {
      useEffect(() => {
        console.log('我执行了useMOunt');
      }, [])
    }
    return {
       useMount,
    }
})()

(function (useEffect, useMount) {
  useMount() // 报错 
})(react.useEffectt, utils.useMount)

Answer 2

// utils 文件，在这个文件里不引入 useEffect
export const useMount = (callback) => {
useEffect(() => {

console.log('我执行了useMOunt');

}, [])
}
这个是词法作用域跟动态作用域的区别，词法作用域的作用链是函数定义的位置向上查找