超容易理解~require和import引入的变量是否有缓存的区别

504 阅读1分钟

require引用相当于用=赋值,比如const {a,obj} = require('requireVariable');就相当于let a = 1,obj = {a:1};如果在requireVariable里面改变obj里面的属性引用地址不会变化这对引用方有影响,如果在requireVariable重新赋值一个新对象就把引用地址变成了一个新的地址,但引用方还是引用了原来的引用地址,所以对引用方没有影响

/*requireVariable*/
let a = 1;
exports.a=a;
let obj={a:1};
exports.obj=obj;
exports.changeObj = function () {   obj.a=2  }; //有用
exports.rewriteObj = function(){obj={}} //没用
exports.changeA = function () {  a=2} //没用

const {changeA,changeObj,a,obj,rewriteObj} = require('./require')
console.log('a',a) //a 1
console.log('obj={a:1}',obj); //obj={a:1} { a: 1 }
changeA() //change a 1
console.log('change a',a)
changeObj()
console.log('changeObj obj.a=2',obj)
rewriteObj()
console.log("rewriteObj obj={}", obj);

而import 引用相当于建立了一个映射关系,无论是重写对象还是重写变量,import 的变量和被import的变量指向同一个地址,所以更改被import的变量值时会同时修改引用方的变量, 一个简单的理解方式是比如

//importVariable.js //被引用
export let b = {b:1}
export let c = 1
export function changeB(){
    b.b=2;
}
export function rewriteB() { 
    b = {b:3}
}
export function rewriteC(){
    c=2
}

//引用方

import {b,changeB,rewriteB,c,rewriteC} from './import.js';
console.log(b)//{b:1}
changeB()
console.log(b)//{b:2}
rewriteB()
console.log(b)//{b:3}
console.log('c',c) // c 1
rewriteC()
console.log('c',c) // c 2

引用方相当于变成把代码放入一个文件,在同一个作用域下面改当然是会一起变的啦~

let b = {b:1}
let c = 1
function changeB(){
    b.b=2;
}
function rewriteB() { 
    b = {b:3}
}
function rewriteC(){
    c=2
}
console.log(b)//{b:1}
changeB()
console.log(b)//{b:2}
rewriteB()
console.log(b)//{b:3}
console.log('c',c) // c 1
rewriteC()
console.log('c',c) // c 2