Esmodule和commonjs导入值修改

前言

面试时被问到esmoudle和commonjs导出数据修改后会如何输出，当时由于紧张没答上来，现在记录下。

Commonjs修改导出值

导出值是基础类型

// a.cjs
let data = 1
const plusData = () => {
	data++
	console.log(data)  // 1 第二次为1
} 
module.exports = {
	data,
	plusData
}

// b.js
const { data, plusData } = require('./a.cjs');

plusData();
console.log(data);  // 1

data++
console.log(data); // 2

data = 100;
console.log(data);  // 100

plusData();
console.log(data);  // 100

导出值是引用类型

// a.cjs
const data = {a: 1}
const plusData = () => {
	data.a++
	console.log(data.a)  // 2 //第二次为4
} 
module.exports = {
	data,
	plusData
}

// b.js
let { data, plusData } = require('./a.cjs');

plusData();
console.log(data.a); // 2

data.a++;
console.log(data.a); // 3

data = { a: 100 };
console.log(data.a); // 100

plusData();
console.log(data.a); // 100

ESmodule

导出值是基础类型

// a.js
let data = 1
const plusData = () => {
	data++
	console.log(data)  // 2  // 第二次为3
} 
export default {
	data,
	plusData
}

// b.js
import a from './a.js';
let { data, plusData } = a;
plusData(); 
console.log(data);   // 1

data.a++;
console.log(data);   // 1

data = 5; 
console.log(data);   // 5

plusData();
console.log(data);  // 5

导出值是引用类型

// a.js
const data = {a: 1}
const plusData = () => {
	data.a++
	console.log(data.a)  // 2  // 第二次为4
} 
export default {
	data,
	plusData
}
// b.js
import a from './a.js';
let { data, plusData } = a;

plusData();
console.log(data); // 2

data.a++;
console.log(data);  // 3

data = {a: 100};
console.log(data);  // 100

plusData();
console.log(data); // 100

总结

导出的是基础类型

1. ESM在调用方法修改模块中的值后，引用这个值的地方也随着改变；而CJS在调用方法后，并没有随着改变；就是因为CJS输出的是一个值的拷贝，而ESM输出的是值的引用；
2. 不管是esm还是cjs如果直接修改导出值则内外会失去关联，此时外部修改不会影响内部

导出的值是引用类型

1. 不管是esm还是cjs导出引用类型内外部修改都会对原值有影响
2. 不管是esm还是cjs如果直接修改导出值则内外会失去关联，此时外部修改不会影响内部