在 JavaScript 编程中，了解和正确使用作用域是非常重要的。今天，我们聊聊作用域及其类型。

什么是作用域？

作用域是当前的执行上下文，值和表达式在其中“可见”或可被访问。可以把它理解为变量和函数的“可见范围”。

静态作用域和动态作用域

作用域分为静态作用域（也叫词法作用域）和动态作用域：

• 静态作用域：与代码的位置有关，与执行代码时的环境无关。JS 采用的是静态作用域。
• 动态作用域：在代码执行时确定的作用域。

JS 的作用域类型

可以分为四种类型：

1. 全局作用域：脚本模式运行所有代码的默认作用域。
2. 函数作用域：由函数创建的作用域。
3. 块级作用域：用一对花括号（代码块）创建的作用域。
4. 模块作用域：模块模式中运行代码的作用域。

接下来，我们分析一下各种作用域的特点。

全局作用域

在 JS 中，变量的作用域是嵌套的，它们形成了一棵树：

• 最外层的作用域是树的根部，也叫全局作用域。
• 被最外层作用域包含的作用域是根的子孙，如各种嵌套的代码块形成的作用域。

全局作用域中的变量称为全局变量，可以在任何作用域内访问。有两种全局变量：

1. 全局声明变量：在最顶层由 const、let 和 class 声明的变量。
2. 全局对象变量：在最顶层由 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 中的作用域。

最后

如果你有任何问题或见解，欢迎在评论区留言，让我们一起交流学习 ！