在 JavaScript 编程中，了解和正确使用作用域是非常重要的。今天，我们聊聊作用域及其类型。
什么是作用域？
作用域是当前的执行上下文，值和表达式在其中“可见”或可被访问。可以把它理解为变量和函数的“可见范围”。
静态作用域和动态作用域
作用域分为静态作用域（也叫词法作用域）和动态作用域：
- 静态作用域：与代码的位置有关，与执行代码时的环境无关。JS 采用的是静态作用域。
- 动态作用域：在代码执行时确定的作用域。
JS 的作用域类型
可以分为四种类型：
- 全局作用域：脚本模式运行所有代码的默认作用域。
- 函数作用域：由函数创建的作用域。
- 块级作用域：用一对花括号（代码块）创建的作用域。
- 模块作用域：模块模式中运行代码的作用域。
接下来，我们分析一下各种作用域的特点。
全局作用域
在 JS 中，变量的作用域是嵌套的，它们形成了一棵树：
- 最外层的作用域是树的根部，也叫全局作用域。
- 被最外层作用域包含的作用域是根的子孙，如各种嵌套的代码块形成的作用域。
全局作用域中的变量称为全局变量，可以在任何作用域内访问。有两种全局变量：
- 全局声明变量：在最顶层由 const、let 和 class 声明的变量。
- 全局对象变量：在最顶层由 var 和 function 声明后创建的变量，这些变量存储在全局对象中。
全局对象可以通过 globalThis 和 window 访问。
下面是一个示例代码：
const declarativeVariable = 'd';
var objectVariable = 'o';
// 所有脚本共享同样的顶级作用域
console.log(declarativeVariable); // 'd'
console.log(objectVariable); // 'o'
// 不是所有变量都会创建为全局对象的属性
// 此处最顶层 const 创建的是全局声明变量，不是全局对象，因此 window 对象下访问为 undefined
console.log(window.declarativeVariable); // undefined
console.log(window.objectVariable); // 'o'
// globalThis 同 window 表现一致
console.log(globalThis.declarativeVariable); // undefined
console.log(globalThis.objectVariable); // 'o'
通过这个例子，我们可以看到为什么最顶层用 const 声明的变量，通过 window 访问依然是 undefined。
函数作用域
函数内声明的变量，只能在函数作用域范围内访问。
function scope() {
var address = "Beijing";
}
console.log(address); // Uncaught ReferenceError: address is not defined
块级作用域
块级作用域通过 {...} 创建，let 和 const 支持块级作用域。
{
// 作用域 A，可以访问变量 x
const x = 0;
console.log(x); // 0
{
// 作用域 B，可以访问 x、y
const y = 1;
console.log(x); // 0
console.log(y); // 1
}
}
// 作用域 A 外，不能访问 x、y
console.log(x); // 报错：Uncaught ReferenceError: x is not defined
在块级作用域中，同一作用域内不允许声明同名变量，但不同作用域下可以：
?
{
const x = 1;
const x = 2; // 报错：Uncaught SyntaxError: Identifier 'x' has already been declared
}
?
{
const x = 1;
{
const x = 2;
}
}
class 声明
class 声明的类也支持块级作用域。
class Animal {}
console.log(Animal); // class Animal {}
{
class Animal {}
console.log(Animal) // class Animal {}
}
console.log(Animal); // 报错：Uncaught ReferenceError: Animal is not defined
模块作用域
每个 ECMAScript 模块都有自己的作用域，因此在顶级模块中声明的变量不是全局的。
总结
作用域是值或表达式的可访问范围。JS 采用静态作用域，并分为四种。以下是不同声明类型在作用域方面的表现：
希望能帮助你更好地理解 JS 中的作用域。
最后
如果你有任何问题或见解，欢迎在评论区留言，让我们一起交流学习 ！