ES6模块与CommonJS模块的差异

JavaScript

• CommonJS模块输出的是一个值的拷贝，ES6模块输出的是一个值的引用。

我们来看一个例子：

CommonJS

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};
// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

ES6

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

例子来源

通过例子可以看出来因为CommonJS输出的是一个值的拷贝，所以一旦输出的话，模块内部的改变并不会影响到已经输出的这个值。而对与ES6模块来说就不一样了，因为ES6模块输出的是一个值的引用，所以假如模块的内部发生了改变的话，输出的值也依然会发生改变。

• CommonJS模块是运行时加载，ES6模块是编译时输出接口。

因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

• ES6输出的模块变量，只是一个符号链接，所以这个变量是只读的，对它进行重新赋值会报错。

• CommonJS 加载的是整个模块，即将所有的接口全部加载进来，ES6 可以单独加载其中的某个接口（方法）。

• CommonJS this 指向当前模块，ES6 this 指向undefined。