“导出默认的x”和“导出{x作为默认}”之间有区别吗？

Question

我了解到，使用ES6模块导出时，导出的变量和导入的变量之间会发生绑定，因此当导出的变量发生更改时，导入的变量将演示该更改。

但是，我也读到导入的变量只在某些情况下携带绑定到导出的变量。

我的具体问题是，在以下两种场景中，导出变量的绑定方式是否存在差异.

// Scenario #1
let a = 5;
export default a;

// Scenario #2
let a = 5;
export { a as default };

Answer 1

它们在一般情况下是不一样的，尽管在函数和类的情况下它们的行为是相同的。

let a = 4;
export default a;

等于

let a = 4;
let *default* = a;
export {*default* as default};

意思是

let a = 4;
export default a;

a = 5;

将4保留为导出值，即使模块中的a已更改，而export {a as default};将使导出值5。

ECMAScript规范定义了三种不同形式的export default，并给出了表http://www.ecma-international.org/ecma-262/7.0/#table-42和导出的主要语法声明中的一些示例：http://www.ecma-international.org/ecma-262/7.0/#sec-exports

导出默认HoistableDeclaration导出默认ClassDeclaration导出默认展望∉{ function，class } AssignmentExpression；

在这种情况下，使用HoistableDeclaration映射到函数声明和生成器声明。

如果我们看一下规范，它定义了文件中变量名的映射，即导出的名称，http://www.ecma-international.org/ecma-262/7.0/#sec-exports-static-semantics-exportentries。

ExportDeclaration:导出默认HoistableDeclaration，让名称为BoundNames of HoistableDeclaration。让localName成为唯一的名称元素。返回一个包含记录{[ModuleRequest]：null，[ImportName]：null，[LocalName]：localName，[ExportName]："default"}的新列表。ExportDeclaration:导出默认ClassDeclaration，让名称为BoundNames of ClassDeclaration。让localName成为唯一的名称元素。返回一个包含记录{[ModuleRequest]：null，[ImportName]：null，[LocalName]：localName，[ExportName]："default"}的新列表。ExportDeclaration:导出默认AssignmentExpression；让条目是记录{[ModuleRequest]：null，[ImportName]：null，[LocalName]："* default *"，[ExportName]："default"}。返回包含条目的新列表。注意："* default *“在本规范中用作匿名缺省导出值的合成名称。

这里的BoundNames返回作为值传递的函数或类的名称，因此在前两种情况下

export default function fn(){}
// or 
export default function* fn(){}
// or
export default class cls {}

将导出变量fn或cls的活动绑定。

你也可以

export default function(){}
// or 
export default function*(){}
// or
export default class {}

在这种情况下，这些值将在没有活动绑定的情况下导出，因为它们没有名称。

在export default AssignmentExpression ;的最后一个例子中，这就是您的export default a;示例所满足的。您可以注意到，它有[[LocalName]]: *default*而不是[[LocalName]]: localName，就像其他的一样。这是因为export default a;不将a识别为要导出的名称，而是将其处理为a的当前值即导出值。这与export default 4;没有什么不同，从规范的角度来看，它没有名称。

本质上

export default function fn(){}

等于

function fn(){}
export {fn as default};

但

let a = 4;
export default a;

不等于：

let a = 4;
export {a as default};

Answer 2

如下文所述：

Mozilla Docs

场景1

它用于命名出口

// module "my-module.js"
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

场景2

它用于导出单个值或模块的回退值。

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

但是，没有关于性能差异的规范。