JavaScript 中块级作用域 (Block Scope) 的概念是什么？

推荐答案

在 JavaScript 中，块级作用域（Block Scope）是指由一对花括号 {} 所包围的代码块中声明的变量或常量，其作用域仅限于该代码块内部。块级作用域在 ES6 中通过 let 和 const 关键字引入，与 var 的函数作用域不同，let 和 const 声明的变量或常量只在当前代码块内有效。

if (true) {
    let blockScopedVar = "I am block scoped";
    console.log(blockScopedVar); // 输出: I am block scoped
}
console.log(blockScopedVar); // 报错: blockScopedVar is not defined

本题详细解读

1. 块级作用域的定义

块级作用域是指在代码块（通常由 {} 包围）内部声明的变量或常量，其作用域仅限于该代码块。这意味着在代码块外部无法访问这些变量或常量。

2. let 和 const 的块级作用域

在 ES6 之前，JavaScript 只有函数作用域和全局作用域，var 声明的变量会提升到函数或全局作用域的顶部。而 let 和 const 引入了块级作用域，使得变量和常量的作用域更加可控。

• let 用于声明块级作用域的变量。
• const 用于声明块级作用域的常量，且一旦声明后不能重新赋值。

{
    let x = 10;
    const y = 20;
    console.log(x); // 输出: 10
    console.log(y); // 输出: 20
}
console.log(x); // 报错: x is not defined
console.log(y); // 报错: y is not defined

3. 块级作用域的优势

• 避免变量污染：块级作用域可以防止变量泄露到外部作用域，减少命名冲突。
• 更清晰的代码结构：块级作用域使得变量的生命周期更加明确，代码更易读和维护。
• 支持块级作用域的循环：在 for 循环中使用 let 声明的变量，每次迭代都会创建一个新的块级作用域。

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出: 0, 1, 2
    }, 100);
}

4. 块级作用域与 var 的区别

• var 声明的变量具有函数作用域或全局作用域，且会提升到作用域的顶部。
• let 和 const 声明的变量或常量具有块级作用域，且不会提升。

if (true) {
    var functionScopedVar = "I am function scoped";
    let blockScopedVar = "I am block scoped";
}
console.log(functionScopedVar); // 输出: I am function scoped
console.log(blockScopedVar); // 报错: blockScopedVar is not defined

5. 注意事项

• 在同一个块级作用域中，不能重复声明同一个变量或常量。
• const 声明的常量必须在声明时初始化，且不能重新赋值。

// www.javascriptcn.com code example
{
    let x = 10;
    let x = 20; // 报错: Identifier 'x' has already been declared
}

{
    const y; // 报错: Missing initializer in const declaration
    y = 10;
}