你真的懂 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 被當做表達式會更明顯一些。

歡迎關注公眾號“眾里千尋”或者在我的網站瀏覽更多更系統的信息。