commonjs与ES6模块化有什么区别

commonjs与ES6模块化有什么区别

commonjs

语法

• 引入 require（），语法是同步的
• 导出 module.export={}
• 输出是对一个值的拷贝，运行时加载this指向当前模块，后续值得修改不会影响原来的值，就好比两个地方引入同一张图片，不会因为一个地方把图片地址修改另外一个地方就修改，加载的是整个模块

ES6模块化

语法

• 引入 import xx from xx 可以说是异步的不知道说法准不准确有个解析阶段
• 导出 export default 一个模块只能使用一次
• 按需导出 export 可以使用多次
• 输出的是一个值得引用，编译时输出接口，也就是输出值，这个时候如果你传参在模块中你是可以改变里面的值取到不同的结果，简而言之就是静态逻辑动态引用，输出值得引用，可以按需加载import {xx} from xx，this指向undefined

两者区别

首先是

• 语法两者写法有区别，
• this指向：ES6模块化 this指向undefined commonjs指向当前模块
• 运行机制：ES6 在编译时输出接口，commonjs在运行的时候就已经加载进来了
• 引用：ES6可以按需加载，commonjs是引用整个文件
• 结果：ES6是对引用值得引用就是后期可以通过参数修改，commonjs是对值得拷贝