JS 作用域与作用域链详解

当我们使用 JavaScript 编写代码时，经常会遇到变量作用域的问题，这个时候就需要了解 JavaScript 的作用域与作用域链。了解 JavaScript 的作用域与作用域链，可以帮助我们更好地理解 JavaScript 代码运行的流程，从而提高编程效率和代码质量。

一、作用域

1.1 什么是作用域

作用域是指变量和函数的可访问范围。JavaScript 程序中，每个变量和函数都有自己的作用域，这个作用域包含了这个变量或函数可以被访问的代码段。

1.2 JavaScript 的作用域类型

JavaScript 中的作用域分为两种类型：全局作用域和局部作用域。

1.2.1 全局作用域

全局作用域是指在整个 JavaScript 程序中都可以访问的变量和函数。在 JavaScript 中，如果一个变量或函数没有在某个特定的作用域中声明，那么它就被默认归为全局作用域。

1.2.2 局部作用域

局部作用域是指在一个函数中声明的变量或函数只能在该函数内部被访问。它们无法在函数外部访问。

1.3 变量的作用域

变量的作用域是指这个变量可以被访问的代码范围。在 JavaScript 中，变量的作用域是由它在代码中声明的位置所决定的。变量在声明的作用域外无法被访问。

下面是一个示例，展示了 JavaScript 中变量的作用域：

var globalVariable = "Global Variable";

function testScope() {
  var localVariable = "Local Variable";
  console.log(globalVariable); // 输出 "Global Variable"
  console.log(localVariable); // 输出 "Local Variable"
}

testScope();
console.log(globalVariable); // 输出 "Global Variable"
console.log(localVariable); // 报错，因为 localVariable 是在函数内部声明的，函数外部无法访问

这个示例中定义了一个全局变量 globalVariable，一个局部变量 localVariable。在函数 testScope() 中，我们可以访问到全局变量和局部变量，而在函数外部只能访问到全局变量。当我们尝试在函数外部访问局部变量 localVariable 时，这段代码会报错，因为在函数外部无法访问变量 localVariable。

二、作用域链

2.1 什么是作用域链

作用域链是 JavaScript 中非常重要的概念，它是决定变量和函数访问权限的机制。在 JavaScript 中，每个作用域都有一个链，这个链指向了外部作用域，形成了一个作用域链。当一个变量或函数需要被访问时，JavaScript 引擎会先在当前作用域中查找，如果没有找到，则逐级向外部作用域查找，直到找到为止。

2.2 作用域链的构成

作用域链的构成由当前作用域和父级作用域构成，每个作用域都有一个指向其父级作用域的指针。

下面的示例展示了一个简单的作用域链：

function func1() {
  var a = 1;
  function func2() {
    var b = 2;
    console.log(a);
    console.log(b);
  }
  func2();
}

func1();

在这个示例中，当函数 func2() 被调用时，它需要访问变量 a 和 b。因为变量 a 是定义在 func1() 中，而变量 b 是定义在 func2() 中，这些变量需要通过作用域链来访问。当 func2() 访问变量 a 时，它首先会在自己的作用域中查找是否有定义过的变量 a，如果找到了，就使用这个变量。如果没有找到，则会沿着作用域链逐级向外寻找，直到找到为止。

2.3 作用域链的变化

作用域链的变化是由执行上下文决定的。JavaScript 中的执行上下文是描述执行环境的数据结构，它定义了变量和函数的可访问性以及当前代码的执行状态。

下面的示例展示了当函数 func2() 被调用时，作用域链的变化：

function func1() {
  var a = 1;
  function func2() {
    var b = 2;
    console.log(a);
    console.log(b);
  }
  func2();
}

func1();

当函数 func1() 被调用时，它会创建一个新的执行上下文。在这个执行上下文中，变量 a 和函数 func2() 被定义并保存在作用域链中。当函数 func2() 被调用时，它也会创建一个新的执行上下文。在这个执行上下文中，变量 b 被定义并保存在作用域链中。

总结

以上就是 JavaScript 作用域和作用域链的详细讲解，了解 JavaScript 的作用域和作用域链可以帮助我们编写更加规范高效的代码，避免出现不必要的错误。