JavaScript块级作用域与状态提升详解

前言

在ES6标准引入之前，JavaScript仅支持通过var进行变量声明，这种机制常给开发者带来诸多困扰。随着ES6的发布，语言新增了let和const两种声明方式。本文将围绕变量声明规则、作用域类型以及状态提升机制展开详细讨论。

作用域/执行上下文

在JavaScript运行时环境中，作用域主要划分为三种类型：全局作用域、函数作用域以及块级作用域。

• 全局作用域（或执行上下文）是程序默认且最基础的作用域层级。整个JavaScript脚本生命周期内，全局作用域始终位于执行栈底部，不会被弹出或销毁。以浏览器环境为例，全局作用域中包含一个全局对象，即window对象。
• 函数作用域指的是函数体内部所构成的独立作用域空间。
• 块级作用域存在于由大括号 { 和 } 包裹的代码块区域内。需要注意的是，函数体本身也是由大括号包裹的，因此函数作用域在本质上也可以被视为一种块级作用域。

var 声明

当使用var在全局作用域中声明变量时，该变量会作为属性被添加到全局对象上，从而成为全局变量。若在函数作用域中使用var声明，该变量会被提升至函数体的顶部。此外，无论代码逻辑是否实际执行，函数声明都会在预编译阶段被提升，而变量的初始化操作则保留在本地执行阶段。

• var声明的变量会提升至当前所在作用域的顶部。这里需要明确的是，var声明仅涉及全局作用域或函数作用域，并不具备块级作用域的特性。

块级声明

临时死区（Temporal Dead Zone，简称TDZ）是用于描述let和const声明不具备提升行为的专业术语。JavaScript引擎在扫描代码并发现变量声明时，会根据声明类型采取不同策略：对于var声明，变量会被提升至作用域顶部；而对于let和const声明，变量会被置于临时死区中。如果在TDZ期间尝试访问变量，将触发运行时错误；只有当代码执行到变量声明语句之后，变量才会从TDZ中移出，此时方可正常访问。

const和let声明的标识符属于块级标识符，因此它们所声明的变量或常量仅在当前的代码块内部有效。一旦执行流程离开该代码块，这些变量或常量会立即被销毁。

• let声明的作用是将变量的作用域严格限制在当前代码块内。在声明语句执行之前，该变量会被放置在临时死区中，防止被提前访问。
• const声明用于定义常量，且每个使用const声明的常量在定义时必须进行初始化。对于对象类型的常量，虽然const不允许修改其绑定关系（即不能指向其他对象），但允许修改对象内部的属性值。简而言之，const禁止修改绑定，但允许修改绑定的值。

不声明的变量

在JavaScript中，如果定义变量时不使用任何关键字进行声明，代码执行不会报错，但这种做法并不被推荐。

无论是在全局作用域、函数作用域还是块级作用域中，执行如 a = 0 这样的赋值语句，都会在window对象上创建一个名为a的属性，这实际上等同于执行了 window.a = 0。相比之下，只有在全局作用域中使用 var a = 0 声明变量时，才会在window上创建属性a，即等效于 window.a = 0。

1. 不使用关键字声明变量

function func() {
    b = 0
    console.log(b);
    console.log(b === window.b);
}
func()
console.log(b === window.b);

// 输出结果
/*
0
true
true
*/

上述代码执行了func函数，使得变量b成为了window对象的一个属性。

2. 使用 var 声明的变量

function func(x) {
    var b = 0
    console.log(b);
    console.log(b === window.b);
}
func(1)            
console.log(b === window.b);

// 输出结果
/* 
0
false
Uncaught ReferenceError: b is not defined
*/

这段代码展示了正常的var声明变量在函数作用域内发生提升的情况。

var 声明和块级声明的区别

全局作用域绑定

• 当var声明位于全局作用域时，它会创建一个新的全局变量，并将其作为全局对象的属性（在浏览器环境中即为window对象）。这意味着使用var声明可能会无意中覆盖已存在的全局变量。
• 块级声明（包括let或const）在全局作用域中会创建一个新的绑定，但该绑定不会作为全局对象的属性添加。因此，使用块级声明不会覆盖全局变量，只能起到遮蔽（shadowing）全局变量的作用。

let RegExp = 'Hello!'
console.log(RegExp);
console.log(window.RegExp === RegExp);
// 结果
/* 
Hello!
false
*/
复制代码

状态提升

• var声明的变量会提升至当前作用域的顶部，在实例化之前其值为undefined。var声明的作用范围仅限于全局作用域或函数作用域。
• 块级声明的变量会被存入临时死区，若在实例化之前尝试访问该变量，会抛出Uncaught ReferenceError错误。

console.log(RegExp);
let RegExp = 'Hello!'
// Uncaught ReferenceError: Cannot access 'RegExp' before initialization

块级绑定的最佳实践

建议默认使用const进行声明，只有在确实需要修改变量值的场景下，才使用let。

函数声明提升

函数声明的提升优先级高于变量声明的提升。

函数声明具有如下特点：函数声明会被提升至当前作用域的顶部，并且可以在当前作用域内的任何位置被访问到。

总结

至此，关于JavaScript块级作用域绑定以及状态提升的文章介绍完毕。如需了解更多相关JS块级作用域绑定或状态提升的内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！