commonjs和es module对定义变量被改变的分析

最新推荐文章于 2024-09-03 19:54:24 发布

养只猫

最新推荐文章于 2024-09-03 19:54:24 发布

阅读量905

点赞数 2

分类专栏： js es6 node 文章标签： node.js javascript

本文链接：https://blog.youkuaiyun.com/qq_40816649/article/details/123793885

版权

js 同时被 3 个专栏收录

112 篇文章

订阅专栏

node

32 篇文章

订阅专栏

es6

29 篇文章

订阅专栏

本文探讨了CommonJS与ESModule两种JS模块化机制中变量变更的影响。CommonJS通过复制对象的方式实现模块加载，因此修改模块内的变量不会影响到其他引用该模块的地方；而ESModule则是通过引用内存地址来加载模块，因此对模块内的变量进行修改会影响到所有引用该模块的地方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

commonjs和es module都是js模块化机制，commonjs一般用于服务端写nodejs而es module是用与web浏览器js开发。

这篇文章主要说的是在两种不用的模块化机制中对于定义的变量改变的区别
commonjs：commonjs 引用的js文件中的变量被改变是其他地方引用相同的文件的变量不会被改变
文件test1

const {a, afn} = require('./testmodule')

console.log(a, '进来了')
afn()
setTimeout(function () {
    console.log(a, '1秒后') // 不会变化 commonjs require本质上一个js文件就是一个函数，相当于只是拷贝了一个对象出来
}, 1000)

文件testmodule

let a = 10

function afn() {
    a = 1111
    console.log(a)
}

module.exports = {
    a,
    afn
}

esmodule：esmodule 引用的js文件中的变量被改变是其他地方引用相同的文件的变量会被改变
文件testimport

import { a, fna } from './import1';

console.log(a);

setTimeout(() => {
  console.log(a); // 会改变esm import近来的只是引用了内存中的一个地址
}, 1000);

// setTimeout(function () {
//   fna();
// }, 1500);

文件import1

export let a = 10;
setTimeout(function () {
  a = 100;
}, 300);

export const fna = function () {
  a = 111;
};

结论commonjs require本质上一个js文件就是一个函数，相当于只是拷贝了一个对象出来，而esmoduleimport近来的只是引用了内存中的一个地址
这次探索加深了对common和esmodule的了解！！！