es6运行机制借鉴整理

·  阅读 158

假设我们有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的地方直接执行了模块的代码。

分类:
前端
标签:
分类:
前端
标签: