揭秘 JavaScript 中神秘的变量提升现象

2024-01-12 13:17:17

我们经常在编写 JavaScript 代码时，会遇到一些难以理解的现象。比如，我们在定义函数之前就执行了它，却没有报错。我们在定义变量之前就访问了它，却返回了 undefined 也没有报错。这是怎么回事呢？这就要从 JavaScript 的提升说起。

变量提升（Hoisting）

变量提升是 JavaScript 中一个非常重要的概念。它会在代码执行之前，将所有的变量声明提升到当前作用域的顶部。这意味着，即使你在代码中没有显式地声明变量，也可以在它被声明之前使用它。

变量提升只对变量声明起作用，对变量赋值不起作用。这意味着，你不能在变量被声明之前给它赋值。例如，下面的代码就会报错：

console.log(a); // 报错：ReferenceError: a is not defined
var a = 1;

暂时性死区（Temporal Dead Zone）

暂时性死区是指变量在声明之前的一段区域，在这个区域内，变量是不可访问的。暂时性死区从变量声明开始，直到变量被初始化为止。

function foo() {
  console.log(a); // 报错：ReferenceError: a is not defined
  var a = 1;
}

在上面的代码中，变量 a 在函数 foo 内部被声明，因此它的暂时性死区从函数 foo 开始，直到变量 a 被初始化为止。这意味着，在函数 foo 内部，在变量 a 被初始化之前，是不能访问它的。

作用域

变量提升还会受到作用域的影响。作用域是指变量可以被访问的范围。JavaScript 中有两种作用域：全局作用域和局部作用域。全局作用域是指整个程序都可以访问的作用域，而局部作用域是指函数内部的作用域。

在全局作用域中声明的变量，可以在任何地方访问。在局部作用域中声明的变量，只能在该局部作用域内访问。

var a = 1; // 全局作用域

function foo() {
  var b = 2; // 局部作用域
  console.log(a); // 可以访问全局变量 a
  console.log(b); // 可以访问局部变量 b
}

foo();

console.log(a); // 可以访问全局变量 a
console.log(b); // 报错：ReferenceError: b is not defined