es6运行机制借鉴整理

假设咱们有m.js与n.js以下：

// m.js
import {a} from './n';
console.log('3');
console.log(a);
复制代码

// n.js
console.log('1');
export const a = 'a';
console.log('2');
复制代码

输出结果：

->1
->2
->3
->a
复制代码

接下来吧conlole.log(a)去掉后再次看一下输出结果：

->1
->2
->3
复制代码

思考：为何会出现这种状况呢？

在阮一峰老师的《ECMAScript 6 入门》里讲到：ES6模块的运行机制与CommonJS不同，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的须要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号链接”，原始值变了，import输入的值也会跟着变。

但是按照上面说的，那有console.log(a)的时候，应该是输出3,1,2的顺序，而不是1,2,3的顺序呀。我猜想是上面讲的不细致的缘由，应该分为编译时和运行时来讲。ES6的这种加载称为编译时加载或者静态加载，即 ES6 能够在编译时就完成模块加载，在编译的时候，发现了后面有使用到a的地方，就在运行时遇到import的地方直接执行了模块的代码。