JavaScript基础-JS没有块级作用域

在JavaScript的发展历程中，理解其作用域机制对于编写高效、无错误的代码至关重要。传统上，在ES6（ECMAScript 2015）引入let和const关键字之前，JavaScript并没有块级作用域的概念。本文将探讨ES6之前的JavaScript如何处理变量的作用域，并解释为什么这可能引发一些常见的编程陷阱。

一、什么是块级作用域？

块级作用域是指在一对花括号 {} 内定义的变量仅在该块内部有效，无法在外部访问。然而，在ES6之前，JavaScript并不支持这种细粒度的作用域控制，而是依赖于函数作用域来管理变量的可见性。

（一）函数作用域 vs 块级作用域

• 函数作用域：变量在函数内声明，则该变量的作用范围限于该函数内部。
• 块级作用域（ES6及之后）：使用let和const声明的变量具有块级作用域，意味着它们仅在包含它们的最近的一对花括号 {} 内部有效。

二、ES6之前的JavaScript作用域规则

在ES6之前，JavaScript主要通过var关键字来声明变量，所有用var声明的变量都遵循函数作用域或全局作用域规则，而不是块级作用域。

（一）变量提升

var声明的变量会被“提升”到所在作用域的顶部，这意味着你可以在声明之前访问这些变量，但此时它们的值为undefined。

console.log(x); // 输出: undefined
var x = 10;

（二）缺少块级作用域的问题

由于缺乏块级作用域的支持，以下情况可能会导致意外的行为：

例子1：if语句中的变量

if (true) {
    var blockScoped = "I'm supposed to be block-scoped";
}
console.log(blockScoped); // 输出: I'm supposed to be block-scoped

在这个例子中，即使变量是在if语句块内声明的，它仍然在整个函数或全局范围内可访问，因为它是基于函数作用域而非块级作用域。

例子2：循环中的变量

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

这里，尽管我们期望输出0, 1, 2，但由于var的作用域限制，所有计时器回调函数共享同一个i变量，且当计时器触发时，循环已经结束，i的值为最终值3。

三、ES6引入的解决方案

为了解决上述问题，ES6引入了两个新的关键字：let和const，它们支持块级作用域。

（一）使用let代替var

let允许你在块级作用域中声明变量，避免了不必要的变量泄露。

if (true) {
    let blockScoped = "Now I'm really block-scoped";
}
// console.log(blockScoped); // 报错: blockScoped is not defined

（二）使用const声明常量

const用于声明常量，一旦赋值就不能再改变，并同样遵循块级作用域规则。

if (true) {
    const constantValue = "This value cannot change";
    // constantValue = "New Value"; // 报错: Assignment to constant variable.
}

（三）改进后的循环示例

利用let可以修正前面提到的计时器问题：

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

每个计时器回调函数现在都有自己的独立i副本，因此能正确打印出预期的结果。

四、结语

感谢您的阅读！如果你有任何问题或想法，请在评论区留言交流！