韩海Tempest

ESM和CommonJS的差异

Nov 14, 2022 · 3min

两个重大差异:

1、Common JS模块输出的是一个值的拷贝,ES6模块输出的是值的引用

Common JS模块的输出是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值,主要原因是模块加载之后,输出的值就会被缓存,如果输出为一个函数,则在引入时都会去执行这个函数

ES6模块的运行机制和Common JS不一样,遇到import命令,就会生成一个只读引用,等到脚本真真执行时,再根据这个只读引用,到被加载的那个模块中去获取值

ES6模块不会缓存运行结果,而是动态地去被加载的模块中获取值,并且变量总是绑定其所在的模块,变量是只读的,对他进行重新赋值会报错

ES6模块中顶层this指向undefinded

CommonJS模块的顶层this指向当前模块

2、Common JS模块是运行时加载(加载时执行),ES6模块是编译时输出接口

Common JS加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成

ES6模块不是对象,他的对外接口只是一种静态的定义,在代码静态解析阶段就会生成

>
CC BY-NC-SA 4.0 2021-PRESENT © 韩海Tempest