面试题：JavaScript函数提升与作用域：ES6模块中函数提升的特殊情况

Question

在ES6模块环境下，有如下代码： ```javascript // moduleA.js import { func } from './moduleB.js'; console.log(func()); // moduleB.js let result = func(); function func() { return 20; } export { func }; ``` 请分析这段代码可能会出现的问题，并说明在ES6模块中函数提升的规则与传统JavaScript脚本有何不同，如何修改代码使其正常工作并给出合理的解释。

Answer 1

代码问题分析

1. moduleB.js 中的问题：在 moduleB.js 中，let result = func(); 这行代码在 func 函数声明之前调用了 func 函数。在 ES6 模块中，不像传统 JavaScript 脚本有函数提升，这里函数在声明之前是不可用的，所以会导致 func 未定义的错误。

ES6 模块与传统 JavaScript 脚本函数提升规则的不同

1. 传统 JavaScript 脚本：在传统 JavaScript 脚本（非严格模式下），函数声明会被提升到所在作用域的顶部，意味着函数可以在声明之前被调用。例如：

console.log(func());
function func() {
    return 20;
}

这段代码在传统 JavaScript 脚本中可以正常运行，因为 func 函数声明被提升到了作用域顶部。 2. ES6 模块：在 ES6 模块中，不存在函数提升。模块内的代码在解析时会按照书写顺序进行，函数在声明之前是不可用的。例如上述 moduleB.js 中的代码，func 在声明之前被调用就会报错。

修改代码使其正常工作及解释

1. 修改 moduleB.js：将 let result = func(); 这行代码移到 func 函数声明之后，修改后的 moduleB.js 代码如下：

function func() {
    return 20;
}
let result = func();
export { func };

这样修改后，func 函数在被调用时已经声明，代码就能正常工作。moduleA.js 无需修改，因为它导入 func 函数并调用的逻辑是正确的。在 moduleB.js 中，先声明 func 函数，然后再调用它，符合 ES6 模块中函数声明和调用的顺序规则。