es6模块化export和export default导出值得操作效果为什么不一致？

Question

export的方式导入导出，可以输出预期的结果

// test.js
export let counter = 3
export function incCounter() {
    counter++;
}

// demo.html
import { counter, incCounter } from './test.js'
console.log(counter)//3
incCounter()
console.log(counter)//4 =>跟预期相符合

但是export defualt输出的并不是预期结果

// test.js
let counter = 3
function incCounter() {
  counter++;
}
export default { counter, incCounter }

//demo.html
import a from './test.js'
console.log(a.counter)//3
a.incCounter()
console.log(a.counter)//3 => ??? 不是说es6模块导出得是一个值的引用

Answer 1

export default 跟 命名export 一个最明显的差距就是这：export default 导出的是 value, 命名export 导出的是引用，因为 export default 要考虑兼容cjs的module.exports.

这个回答能很好解答你的疑问了：https://stackoverflow.com/a/67173273/7261556

Answer 2

因为涉及基本类型的赋值和引用赋值。所以你 export 的时候是暴露的一个变量 counter 。而 export default 时导出的时候是有一个赋值操作的等同于：

const default = {
  counter: counter,
  incCounter: incCounter
}

那么最后暴露的 counter 属性是 3 这个数字类型的值，并不是对于 counter 变量的引用，使用对象包裹起来就好了：

// test.js
let counter = {
  value: 3
}
function incCounter() {
  counter.value++;
}
export default { counter, incCounter }

//demo.html
import a from './test.js'
console.log(a.counter) // {value: 3}
a.incCounter()
console.log(a.counter) // {value: 4}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。