javascript - ES6模块: export before finishing definitions?

Question

我想知道从另一个文件访问 Foo.bar 是否保证有效，因为我正在“添加”一个新属性 bar (例如，像静态成员)到类 Foo“之后”导出 Foo。

// foo.js

// we export Foo here
export class Foo {
    // ...
}

// note this is "added" after Foo's definition block
Foo.bar = 'a';

// index.js
import { Foo } from './foo.js';
console.log(Foo.bar)' // 'a' or 'undefined'?

我在 Chrome 和 Firefox 中尝试过，它工作得很好(打印 a 而不是 undefined)，但我不确定这是否是允许的有效语法任何与实现无关的 ECMAScript？

我认为这与标准要求 JS 解释器解释模块文件 foo.js 的方式有关:它是否在看到类时立即向导入器公开 Foo Foo 实现的右大括号，还是在暴露 Foo 之前完成了整个 foo.js 的解析？

Answer 1

它确实在返回模块之前完成了解析。必须如此，因为在同一个文件中，您可以相继导出多个导出。因此它是有效的语法，并且应该在支持 ESModules 的浏览器中工作。

正如我在示例中所示的 here ，首先解析 foo.js 文件，然后在 index.js 中返回模块。您可以在控制台中检查它。首先是

parsed whole foo.js file 

出现日志，然后

now printing Foo.bar a 

出现了。正如您所看到的，在 exports 关键字后面引用导出的对象是有效的。