面试题：JavaScript中模块作用域下变量提升的特性

Question

在JavaScript模块中，变量提升是如何表现的？请通过代码示例说明模块作用域内函数声明和变量声明的提升情况，并解释与全局作用域中变量提升的区别。

Answer 1

1. JavaScript模块中变量提升表现

在JavaScript模块中，不存在像全局作用域那样的变量提升。模块作用域内的变量和函数声明只在模块内部可见，并且它们的作用域是块级作用域。

2. 模块作用域内函数声明和变量声明提升情况示例

// 模块代码
// 函数声明
function moduleFunction() {
    console.log('This is a module function');
}
// 变量声明
let moduleVariable;

// 以下代码展示它们没有像全局作用域那样的提升特性
// 在声明之前使用函数或变量会报错
// moduleFunction(); // 报错：ReferenceError: moduleFunction is not defined
// console.log(moduleVariable); // 报错：ReferenceError: moduleVariable is not defined

// 正确使用方式
moduleFunction();
moduleVariable = 'This is a module variable';
console.log(moduleVariable);

3. 与全局作用域中变量提升的区别

• 全局作用域：
  • 函数声明提升：在全局作用域中，函数声明会被提升到作用域顶部，可以在声明之前调用函数。例如：

// 全局作用域
globalFunction(); 
function globalFunction() {
    console.log('This is a global function');
}

• 变量声明提升：变量声明也会提升，但变量的赋值不会提升。所以在声明之前访问变量会得到undefined，而不是报错。例如：

// 全局作用域
console.log(globalVariable); // undefined
var globalVariable = 'This is a global variable';

• 模块作用域： 函数声明和变量声明都不会提升到模块顶部。在声明之前使用函数或变量会抛出ReferenceError，这使得模块内的代码行为更可预测，遵循块级作用域的规则，避免了一些在全局作用域中因变量提升可能导致的意外行为。