如何理解es6中的import是静态编译执行的？（一说是编译期执行的）？

https://www.zhihu.com/question/265631914

作者：zeng
链接：https://www.zhihu.com/question/265631914/answer/496723117
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

要理解es6中的import是“编译时加载”或者静态加载，需要先理解 JavaScript 引擎是怎么解析 js 的。

JavaScript 被列为 ‘动态’ 或 ‘解释执行’ 语言，于其他传统语言（如 java）不同的是，JavaScript是边编译边执行的。

import 可以说是在编译这一步做了处理

比如分析这一段 ：

import { readFile } from 'fs';

js 代码被 JavaScript 引擎编译时, 并将上面 fs 模块的属性 readFile 指向对应模块的 export const readFile() 方法上，注意这里只是做了指针指向，而并不是执行 fs 模块。当执行 readFile() 时，就会去找指针指向的代码并执行。

区分于CommonJS模块：

let { stat, exists, readFile } = require('fs');

其实上面代码是先执行 fs 模块，得到一份代码拷贝，再获取对应的属性或方法的。

区分于CommonJS模块：

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

 

小结：

import 是做一份指针引用对应的属性和方法，指针引用当然无法处理带有计算的import 如： import { 'f' + 'oo' } from 'my_module' ，而 require是执行代码获取属性和方法，能动态计算和加载