ES6模块化是值的引用?

网上说模块化区别,不少答案是

“commonjs的模块化是值的拷贝,es module的模块化是值的引用。”

自己准备的几个例子,和预期结果还是有区别的。

eg1:

//模块 m.js
const m = {
    a:1,
    arr:['a','b'],
    add(){
        m.a=2;
        m.arr.push('c')
    }
}
export default m;


//调用者
import M from './m';
console.log(M.a,M.arr);
M.add();
console.log(M.a,M.arr);

//输出
//1 (2) ["a", "b"]
//2 (3) ["a", "b", "c"]

eg2:

//模块 m.js
let a= 1;
const arr = ['a','b'];
function add(){
    a=2;
    arr.push('c')
}
export default {
    a,
    arr,
    add
}

//调用者
import M from './m';
console.log(M.a,M.arr);
M.add();
console.log(M.a,M.arr);

//输出
//1 (2) ["a", "b"]
//1 (3) ["a", "b", "c"]

eg3:

//模块 m.js
let a= 1;
const arr = ['a','b'];
function add(){
    a=2;
    arr.push('c')
}
export {
    a,
    arr,
    add
}

//调用者
import * as M from './m';
console.log(M.a,M.arr);
M.add();
console.log(M.a,M.arr);

//输出
//1 (2) ["a", "b"]
//2 (3) ["a", "b", "c"]

上面例子2的结果并不符合预期,而且例子2和例子3主要是export 加不加default的区别。

能解释的小伙伴可以评论区留言!

你可能感兴趣的:(ES6模块化是值的引用?)