欢迎光临
我的个人博客网站

你真的懂 export default 吗?


export default Aexport { 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.AA 是相同的,但是因为 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.jsA 的值发生变化的时候,./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 functionexport 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" 

functionclass 语句会在作用域/块中创建标识符,而 functionclass 语句却不会,尽管他们的函数名和类名可以被使用。

因此,下面代码中:

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 被当做表达式会更明显一些。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 你真的懂 export default 吗?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏