你真的懂 export default 吗？
export default A和export { A as default }乍一看是一样的，但是里面有一些细微的区别比较容易留坑。本文介绍两种写法的不同之处。
import 语句导入的是引用，不是值
有导出就必然有导入，我们先明确下 import 语句的工作原理。
import { A } from './module.js';
显而易见，在上面的代码中，A 和 ./module.js 中的 A 是相同的。再看这段代码：
const module = await import('./module.js');
const { A: destructuredA } = await import('./module.js');
在这段代码中，module.A 与 A 是相同的，但是因为 destructuredA 是结构赋值，因此就有一些不同了。
我们来看下 ./module.js：
// module.js
export let A = 'initial';
setTimeout(() => {
A = 'changed';
}, 500);
导入 ./module.js 的代码为 ./main.js：
// main.js
import { A as importedA } from './module.js';
const module = await import('./module.js');
let { A } = await import('./module.js');
setTimeout(() => {
console.log(importedA); // "changed"
console.log(module.A); // "changed"
console.log(A); // "initial"
}, 1000);
import 语句导入的是引用，也就是说，当 ./module.js 中 A 的值发生变化的时候，./main.js 中也会跟着变化。解构赋值获得的 A 不会变化是因为解构过程中是使用的值赋值给了新变量，而不是引用。
值得注意的是，静态语句 import { A } ... 虽然看着像解构赋值，实际上与解构赋值并不相同。
小结一下：
// 以下代码获得是引用
import { A } from './module.js';
import { A as otherName } from './module.js';
import * as module from './module.js';
const module = await import('./module.js');
// 以下代码获得的是值
let { A } = await import('./module.js');
export default 语句
我们修改下 ./module.js：
// module.js
let A = 'initial';
export { A };
export default A;
setTimeout(() => {
A = 'changed';
}, 500);
同时也修改 ./main.js：
// main.js
import { A, default as defaultA } from './module.js';
import anotherDefaultA from './module.js';
setTimeout(() => {
console.log(A); // "changed"
console.log(defaultA); // "initial"
console.log(anotherDefaultA); // "initial"
}, 1000);
输出结果是 "initial"，为什么呢？
我们知道，我们可以直接 export default 'hello'; 但是却不能 export { 'hello' as A }。规范在这两种语法上有一点不同。export default 后面的将会被作为表达式对待。因此我们可以 export default 'hello';， 甚至可以 export default 1 + 2;。因此，在 export default A 中，A 是作为表达式语句使用的，因此使用的是 A 的值。因此，当 A 的值在 setTimeout 中被改变的时候，export default 出去的值并没有变化。
小结一下：
// 引用
import { A } from './module.js';
import { A as otherName } from './module.js';
import * as module from './module.js';
const module = await import('./module.js');
// 值
let { A } = await import('./module.js');
// 导出引用
export { A };
export { A as otherName };
// 导出值
export default A;
export default 'hello!';
export { A as default } 语句
export {} 导出的始终是一个引用，因此：
// module.js
let A = 'initial';
export { A, A as default };
setTimeout(() => {
A = 'changed';
}, 500);
同样，在先前的 ./main.js 中：
// main.js
import { A, default as defaultA } from './module.js';
import anotherDefaultA from './module.js';
setTimeout(() => {
console.log(A); // "changed"
console.log(defaultA); // "changed"
console.log(anotherDefaultA); // "changed"
}, 1000);
小结下：
// 导入引用
import { A } from './module.js';
import { A as otherName } from './module.js';
import * as module from './module.js';
const module = await import('./module.js');
// 导入值
let { A } = await import('./module.js');
// 导出引用
export { A };
export { A as otherName };
export { A as default };
// 导出值
export default A;
export default 'hello!';
export default function 语句
虽然，前面说过 export default 后面的会被作为表达式使用。但是也有一些例外：
// module.js
export default function A() {}
setTimeout(() => {
A = 'changed';
}, 500);
// main.js
import A from './module.js';
setTimeout(() => {
console.log(A); // "changed"
}, 1000);
输出 "changed"，因为 export default function 有其特殊的语法，在这个语法中，函数是作为引用传递的。
我们稍微做一下修改：
// module.js
function A() {}
export default A;
setTimeout(() => {
A = 'changed';
}, 500);
此时控制台输出 ƒ A() {}，export 语句不再符合 export default function 语法形式，A 便使用了值传递。
不仅仅 export default function，export default class 也是同样的表现。
为什么呢？
原因与这些语句当被用作表达式时的表现有关。
function someFunction() {}
class SomeClass {}
console.log(typeof someFunction); // "function"
console.log(typeof SomeClass); // "function"
如果我们将他们变成表达式：
(function someFunction() {});
(class SomeClass {});
console.log(typeof someFunction); // "undefined"
console.log(typeof SomeClass); // "undefined"
function 和 class 语句会在作用域/块中创建标识符，而 function 和 class 语句却不会，尽管他们的函数名和类名可以被使用。
因此，下面代码中：
export default function someFunction() {}
console.log(typeof someFunction); // "function"
如果不进行特殊处理的话，输出的将会是 "undefined"。
小结如下：
// 导入引用
import { A } from './module.js';
import { A as otherName } from './module.js';
import * as module from './module.js';
const module = await import('./module.js');
// 导入值
let { A } = await import('./module.js');
// 导出引用
export { A };
export { A as otherName };
export { A as default };
export default function A() {}
// 导出值
export default A;
export default 'hello!';
在早些时候，模块中的默认导出是这样的
export default = A，这样看来，A被当做表达式会更明显一些。
欢迎关注公众号“众里千寻”或者在我的网站浏览更多更系统的信息。
