js中Es6 Module 和 Common.js 的区别【面试题详解】

今天爱分享给大家带来js中Es6 Module 和 Common.js 的区别【面试题详解】,希望能够帮助到大家。
CommonJS

对于基本数据类型,属于复制,会被模块缓存。可在另一个模块可以对该模块输出的变量重新赋值。
对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。
当使用 require 命令加载某个模块时,就会运行整个模块的代码。
common.js 同一个模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载就返回第一次运行的结果,除非手动清除系统缓存。
循环加载时,属于加载时执行。即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被 “循环加载”,就只输出已经执行的部分,还未执行的部分不会输出

ES6 Module 模块

ES6 模块中的值属于动态只读引用。

只读:不允许修改引入变量的值,import 的变量是只读的( 包括 基本/复杂 数据类型 )。当模块遇到 import 命令时,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。

动态:原始值发生变化,import 加载的值也会发生变化( 包括 基本/复杂 数据类型)。
循环加载时,ES6 模块是动态引用( 只要两个模块之间存在某个引用,代码就能执行 )。

综上:

common.js 是 module.exports / exports 导出,require 导入;ES6 则是 export 导出,import 导入。
common.js 是运行时加载模块,ES6 是在静态编译期间就确定模块的依赖。
ES6 在编译期间会将所有 import 提升到顶部,common.js 不会提升 require。
common.js 导出的是一个值拷贝,会对加载结果进行缓存,一旦内部再修改这个值,则不会同步到外部。ES6 是导出的一个引用,内部修改可以同步到外部。
两者的循环导入的实现原理不同,common.js 是当模块遇到循环加载时,返回的是当前已经执行的部分的值,而不是代码全部执行后的值,两者可能会有差异。ES6 模块是动态引用,如果使用 import 从一个模块加载变量(即import foo from ‘foo’),那些变量不会被缓存,而是成为一个指向被加载模块的引用。
common.js 中顶层的 this 指向这个模块本身,而 ES6 中顶层 this 指向 undefined。

人已赞赏
前端

js中 require 和 import 区别【面试题详解】

2020-12-29 17:37:55

前端

js中事件委托是什么,原理是什么【面试题详解】

2020-12-29 17:42:09

'); })();