如何理解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是执行代码获取属性和方法,能动态计算和加载

发布了229 篇原创文章 · 获赞 80 · 访问量 42万+

猜你喜欢

转载自blog.csdn.net/qq_34629352/article/details/104507453