import/export ES6 模块的循环加载变量提升问题

今天被大佬L问了个import/export时出现的问题。先是代码：

// html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <script src="aaa.js" type="module"></script>
    <script src="bbb.js" type="module"></script>
</body>
</html>

// aaa.js
var dname = 'this is my name';
var flag = true;
export {
  flag,
  dname
}
import { sum } from "./bbb.js";
console.log(sum(12, 24));

// bbb.js
function sum(num1, num2) {
  return num1 + num2;
}
import { dname, flag} from "./aaa.js";
if(flag){
  console.log('niupi');
}
console.log(dname);
export {sum};

先运行……害，还先跨域一个，vscode直接live server插件解决。运行会出现：

出现了吗！变量提升问题！

但对这块的机制还是不知其所以然。只见大佬L掏出了思路：

就看到了它

好的，那么再补充一个，“函数声明整体会被提升到当前作用域的顶部，函数表达式也提升到顶部但是只有其变量名提升”：

//函数声明式
function greeting(){
      console.log("hello world");
}

//函数表达式
var greeting = function(){
    console.log("hello world");
}

（溜）

提升

import/export ES6 模块的循环加载 变量提升问题

import/export ES6 模块的循环加载变量提升问题