ES6 示例：

user.js

export var age = 22;
setTimeout(() => {
  age = 33;
}, 500);

index.js

import * as user from './user';
console.log('修改之前的age:%s', user.age);
setTimeout(() => {
  console.log('修改之后的age:%s', user.age);
}, 1000);

运行结果:

由此可见 ES6 模块是对值的引用，也就是实时值，导出的值发生了变化，导入的值也跟着一起变。

如果我们直接在index.js中直接修改age呢？

这说明在 ES6 的模块中是不允许对值进行重新赋值的操作。但如果是对象呢？

我们将user.js修改以下：

export var user = {
  age: 22,
};

修改下index.js文件

import { user } from './user';
console.log('修改之前:%s', user.age);
user.age = 33;
console.log('修改之前:%s', user.age);

ES6 模块中不允许对值的修改，但对对象内部的值是允许修改的。

CommonJs 示例：

user.js

var age = 22;
module.exports = age;
setTimeout(() => {
  age = 33;
}, 500);

index.js

var age = require('./user');
console.log('修改之前:%s', age);
setTimeout(() => {
  console.log('修改之后:%s', age);
}, 500);

运行结果:

由此可见 CommonJS 是对值的拷贝。在user.js中对值修改是不会影响到在index.js中值的使用。

同样的，如果我们直接在index.js中修改age呢？

var age = require('./user');
console.log('修改之前:%s', age);
age = 33;
console.log('修改之前:%s', age);

由此可见在 CommonJS 中，是允许对值修改的。

同样的，如果在user.js中导出的是对象，对值做出了修改。那么会不会影响到index.js呢？答案是肯定的。虽然 CommonJS 是对值的拷贝，但如果导出的是对象，拷贝的就是对象的引用地址，也就是说都指向了同一个引用地址。

结论

以上就是【CommonJs 和 ES6 Module 区别】的全部内容了,欢迎留言评论进行交流!