避免陷阱!全面解析JavaScript的四种作用域

发表时间: 2024-07-11 21:28

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

什么是作用域?

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

静态作用域和动态作用域

作用域分为静态作用域(也叫词法作用域)和动态作用域:

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

JS 的作用域类型

可以分为四种类型:

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

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

全局作用域

JS 中,变量的作用域是嵌套的,它们形成了一棵树:

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

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

  1. 全局声明变量:在最顶层由 constletclass 声明的变量。
  2. 全局对象变量:在最顶层由 varfunction 声明后创建的变量,这些变量存储在全局对象中。

全局对象可以通过 globalThiswindow 访问。

下面是一个示例代码:

const declarativeVariable = 'd';var objectVariable = 'o';// 所有脚本共享同样的顶级作用域console.log(declarativeVariable); // 'd'console.log(objectVariable); // 'o'// 不是所有变量都会创建为全局对象的属性// 此处最顶层 const 创建的是全局声明变量,不是全局对象,因此 window 对象下访问为 undefinedconsole.log(window.declarativeVariable); // undefinedconsole.log(window.objectVariable); // 'o'// globalThis 同 window 表现一致console.log(globalThis.declarativeVariable); // undefinedconsole.log(globalThis.objectVariable); // 'o'

通过这个例子,我们可以看到为什么最顶层用 const 声明的变量,通过 window 访问依然是 undefined

函数作用域

函数内声明的变量,只能在函数作用域范围内访问。

function scope() {    var address = "Beijing";}console.log(address); // Uncaught ReferenceError: address is not defined

块级作用域

块级作用域通过 {...} 创建,letconst 支持块级作用域。

{    // 作用域 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、yconsole.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 中的作用域。

最后

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