ES6的import深入理解

本文内容出处已忘了，这里是做个记录，非原创

ES6引入外部模块分两种情况：

1.导入外部的变量或函数等；

import {firstName, lastName, year} from './profile';

2.导入外部的模块，并立即执行

import './test'         // 执行test.js，但不导入任何变量

两种情况区别

第2种情况就不用讲了，就是执行从头到尾执行引入的js文件，当然，会忽略js文件里export。

第1种情况：

console.log('111111');
export var a = 'aaaaaa';
console.log('222222');

import {a} from './a.js';
console.log('333333');
console.log(a);

运行结果：

111111
222222
333333
aaaaaa

和预期一样

但是：：：：

b.js 把console.log(a)这句去掉，看看运行结果

333333

咦，只输出这一句了？我们明明引入了 a 模块了，为何模块里的代码没有执行呢

这要从ES6模块加载的实质谈起

import 的实质

在阮一峰老师的ES6入门一书里讲到：

遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。

等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变

可是按照上面说的，那有console.log(a)的时候，应该是输出3333，1111，2222的顺序，而不是1111,2222,333的顺序呀。

我猜测是上面讲的不细致的原因，应该分为编译时和运行时来说。

ES6的这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，在编译的时候，发现了后面有使用到a的地方，就在运行时遇到import的地方直接执行了模块的代码。当然只是自己的猜测。