作用域是当前的执行上下文,值和表达式在其中“可见”或可被访问。可以把它理解为变量和函数的“可见范围”。
作用域分为静态作用域(也叫词法作用域)和动态作用域:
可以分为四种类型:
接下来,我们分析一下各种作用域的特点。
在 JS 中,变量的作用域是嵌套的,它们形成了一棵树:
全局作用域中的变量称为全局变量,可以在任何作用域内访问。有两种全局变量:
全局对象可以通过 globalThis 和 window 访问。
下面是一个示例代码:
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
块级作用域通过 {...} 创建,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、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 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 中的作用域。
如果你有任何问题或见解,欢迎在评论区留言,让我们一起交流学习 !