变量范围是 JavaScript 中重要的概念之一。它决定了哪些部分的代码可以访问一个变量。在 ECMAScript 2016（ES7）中，变量范围得到了进一步的完善。在本文中，我们将深入了解 ES7 中变量范围相关的新特性，并提供一些示例代码。
ES7 中的变量范围
ES7 中引入了两个新的关键字用于声明变量：let 和 const。
let
let 声明的变量只能在块级作用域中使用。块级作用域是由花括号括起来的代码块。这意味着在使用 let 声明的变量之前，必须在同一作用域内声明它。
{
let x = 1;
console.log(x); // 1
}
console.log(x); // ReferenceError: x is not defined在上面的示例中，x 只能在包含它的代码块中使用。当我们尝试在块外访问变量时，会得到一个 ReferenceError。
此外，let 变量可以重新赋值，但不能通过 var 重新声明。
let x = 1; x = 2; var x = 3; // SyntaxError: redeclaration of let x
const
const 声明的变量也只能在块级作用域中使用，但与 let 不同的是，它的值不能被重新赋值。
{
const PI = 3.14159;
PI = 1; // TypeError: Assignment to constant variable.
}在上面的示例中，我们尝试将 const 变量 PI 的值改为 1，会得到一个类型错误。这是因为 PI 的值不能被重新赋值。
块级作用域与函数作用域
在 ES5 及之前的版本中，JavaScript 中只有函数作用域和全局作用域。let 和 const 的出现，使得块级作用域成为了 JavaScript 中的一个新概念。块级作用域允许我们将不同的代码块嵌套在一起，以便更好地控制变量的范围。
然而，需要注意的是，ES7 中的块级作用域是没有办法将 let 或 const 声明的变量隔离到函数内部的。这意味着，如果你在一个函数内部使用了 let 或 const 声明了一个变量，那么这个变量在整个函数体内都是可见的。
function test() {
if (true) {
let x = 1;
}
console.log(x); // ReferenceError: x is not defined
}在上面的示例中，我们在 if 语句块中使用 let 声明了一个变量 x。但是在 if 块之外，我们无法访问到 x 变量。
暂时性死区
当使用 let 或 const 声明变量时，变量在其声明语句之前是不可用的。在这段时间内，变量处于一个“死区”，这被称为暂时性死区。尝试访问在死区中的变量会导致引用错误。
console.log(x); // ReferenceError: x is not defined let x = 1;
在上面的示例中，我们尝试在 x 变量的声明语句之前访问 x 变量。这样的访问将会导致一个 ReferenceError。
总结
在本文中，我们深入了解了 ES7 中的变量范围这一概念，并介绍了两个新的关键字 let 和 const。我们还解释了块级作用域与函数作用域之间的区别，并介绍了暂时性死区的概念。了解这些概念可以帮助您写出更稳定、更可靠、更高效的 JavaScript 代码。
注：ES7 是 ECMAScript 的一部分，但并非所有浏览器都支持 ES7 的全部功能。如果需要兼容更多的浏览器，请查看 ECMAScript 兼容性表。
欢迎访问我的 GitHub 仓库获取更多的 JavaScript 学习资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a6f8f48841e9894891b75