export default foo和export { foo as default }的区别

作者

1. export default foo;

这种语法导出的是一个值，或者说是表达式值，而不是标识符。导入时，可以随意给予任何名字，这个名字只是用于在导入模块中引用默认导出的值。

//your-module
// 在导出模块的模块中
function foo() {
    // 函数实现部分
    // ...
}

export default foo;
// 在导入模块的模块中
import myFunction from './your-module';

在这种情况下，myFunction 是一个新的标识符，与 foo 没有直接关联。

2.export { foo as default };

这种语法导出的是标识符 foo，并将其赋给默认导出。导入时，使用的标识符就是 foo。

//your-module
// 在导出模块的模块中
function foo() {
    // 函数实现部分
    // ...
}

export { foo as default };
// 在导入模块的模块中
import myFunction from './your-module';

在这种情况下，myFunction 实际上是 foo 的别名，两者指向相同的函数。如果在导出语句之后，后续到的导出模块继续修改了 myFunction 的值，那实际上也改变了 foo。

总体而言，这两种导出方式都会导出一个函数的引用，但是在使用默认导出时，使用 export default foo; 语法更直接，而 export { foo as default }; 语法更显式地将标识符 foo 赋给默认导出。在导入模块时的具体表现可能取决于具体的 JavaScript 运行时和模块解析器的实现。

就第二种情况举个例子，如果模块 A导入了一个模块（foo），其中模块foo被导出后修改了foo，那么在模块 A 中使用 foo 的地方也会受到影响，因为它们实际上引用的是同一个标识符。

// your-module.js
function foo() {
    console.log('Original foo');
}
function bar() {
    console.log("bar call");
}

export { foo as default };

foo = bar;
// moduleA.js
import myFunction from './your-module';

myFunction(); // 输出 'bar call' // 如果导出是export default foo,则输出是“Original foo”

在这个例子中，输出的是更新后的foo，如果导出采用的是export default…那么输出则是“Original foo”。

要十分小心默认导出语法的这个问题，特别是在代码逻辑需要更新导出值的时候。如果你并不打算更新默认导出的值，那么使用export default …就好。如果确实需要更新这个值，就需要使用export { … as default }。记得使用注释来说明情况。

最后更新于 2023-11-21 09:53:26 by twotwolucky

发表评论