JavaScript之作用域链详解

在JavaScript中，作用域链是一个重要的概念，它决定了变量和函数的可访问性。作用域链是由变量对象的列表组成，这些变量对象按照它们被创建的顺序排列。本文将详细介绍JavaScript作用域链，包括什么是作用域链、作用域链的创建过程、作用域链的查找规则以及相关的代码示例。

1. 作用域链的定义

作用域链是JavaScript中一个执行上下文（Execution Context）中所有可访问变量和函数的列表。在查找变量或函数时，JavaScript引擎会按照作用域链的顺序逐级查找。

2. 作用域链的创建过程

当进入一个新的执行上下文时，会按照以下步骤创建作用域链：

1. 创建变量对象（VO）：根据上下文的类型创建一个空的变量对象。
2. 建立作用域链：作用域链的顶端是当前执行上下文的变量对象，然后依次链接到父级执行上下文的变量对象，直至全局执行上下文。
3. 初始化变量对象：将函数的参数、函数声明和变量添加到变量对象中。

var globalVar = "I am global";

function outer() {
  var outerVar = "I am outer";

  function inner() {
    var innerVar = "I am inner";
    console.log(globalVar, outerVar, innerVar);
  }

  inner();
}

outer();

在上述例子中，执行 outer 函数时，会创建作用域链，其中包括全局变量、outer 函数变量，以及 inner 函数变量。

3. 作用域链的查找规则

在查找变量或函数时，JavaScript引擎会按照以下规则在作用域链上逐级查找：

1. 从当前执行上下文的变量对象开始查找。
2. 如果找到，则返回该变量的值。
3. 如果未找到，则继续沿着作用域链向上查找，直到全局执行上下文。
4. **如果全局执行上下文都没有找到，则返回 undefined**。

var globalVar = "I am global";

function outer() {
  var outerVar = "I am outer";

  function inner() {
    var innerVar = "I am inner";
    console.log(globalVar, outerVar, innerVar);
  }

  inner();
}

outer();

在上述例子中，inner 函数可以访问全局变量 globalVar 和外部函数变量 outerVar，这是因为它们都在 inner 函数的作用域链上。

4. 闭包与作用域链

闭包是指在一个函数内部定义的函数，它可以访问外部函数的变量，形成一个闭包作用域链。

function outer() {
  var outerVar = "I am outer";

  function inner() {
    var innerVar = "I am inner";
    console.log(outerVar, innerVar);
  }

  return inner;
}

var closure = outer();
closure(); // 输出：I am outer I am inner

在上述例子中，inner 函数被返回并赋值给变量 closure，形成了一个闭包。当调用 closure 时，它仍然可以访问外部函数 outer 的变量，因为闭包保留了外部函数的作用域链。

结论

作用域链是JavaScript中控制变量和函数可访问性的关键机制。通过深入了解作用域链的创建过程和查找规则，我们能更好地理解JavaScript代码的执行过程，尤其是在涉及嵌套函数和闭包的情况下。

本文由 mdnice 多平台发布