深入探索 CommonJS 导出：值拷贝还是引用地址？

2023-11-21 11:07:47

CommonJS 和 ES 模块：JavaScript 模块化战争

在 JavaScript 的模块化世界中，CommonJS 和 ES 模块无疑是两大巨头。它们都提供了将代码组织成模块的方法，以便复用和共享，但它们在导出机制上却存在着本质性的差异。了解这些差异对于选择最适合您需求的模块系统至关重要。

CommonJS：值拷贝的稳定性

CommonJS 的导出机制是值拷贝，这意味着导出的变量实际上是原变量的副本。想象一下，你有一个常量 message，它存储着 "Hello, world!"。当你用 CommonJS 导出这个常量时，导入模块将获得 message 的一个副本。

// module1.js
const message = 'Hello, world!';

module.exports = message;

// module2.js
const importedMessage = require('./module1');

console.log(importedMessage); // 输出: Hello, world!

这个值拷贝的特点带来了两个好处：

独立性： 导入模块中的变量独立于导出模块中的变量。因此，修改导出模块中的变量不会影响导入模块中的变量。
简单性： CommonJS 的导出机制相对简单易懂，易于上手。

但是，值拷贝也带来了局限性：

对象引用不能导出： CommonJS 不支持导出对象引用，只能导出基本类型或对象的值。
动态导出困难： CommonJS 不支持动态导出，这意味着您必须在导出之前定义所有导出。
循环依赖难以实现： 由于值拷贝的性质，CommonJS 模块难以实现循环依赖。

ES 模块：引用地址的灵活性

与 CommonJS 相比，ES 模块的导出机制是引用地址。这意味着导出的变量实际上是一个指向原变量的指针。回到我们的 message 常量，当您使用 ES 模块导出它时，导入模块将获得对 message 变量本身的引用。

// module1.js
const message = 'Hello, world!';

export const importedMessage = message;

// module2.js
import { importedMessage } from './module1';

console.log(importedMessage); // 输出: Hello, world!