作用域链：深入理解

前端

2023-09-10 23:54:05

在 JavaScript 的执行上下文中，作用域链是一个至关重要的概念，它决定了函数如何访问变量。要理解作用域链，我们需要深入了解 JavaScript 变量对象和执行上下文栈之间的关系。

变量对象

每个执行上下文都有一个关联的变量对象，它存储着该执行上下文中定义的所有变量。当执行上下文被创建时，将创建一个新的变量对象。当执行上下文被销毁时，变量对象也会被销毁。

执行上下文栈

当 JavaScript 代码执行时，执行上下文栈是一个存储执行上下文的堆栈。每个执行上下文都对应栈中的一帧。当一个函数被调用时，一个新的执行上下文会被创建并推入栈中。当函数执行完毕时，该执行上下文会被销毁并从栈中弹出。

作用域链创建

作用域链是一个变量对象数组，它表示一个函数在执行过程中可以访问的变量对象列表。作用域链的创建过程如下：

当前执行上下文的变量对象被推入作用域链。
如果当前执行上下文是一个函数，则它的父执行上下文的变量对象也被推入作用域链。
重复步骤 2，直到到达全局执行上下文（没有父执行上下文）。

因此，作用域链是从当前执行上下文的变量对象开始，向上遍历父执行上下文变量对象的列表，直到到达全局执行上下文。

变量访问

当一个函数执行时，它会访问其作用域链中的变量对象。首先，它会检查当前执行上下文的变量对象。如果没有找到该变量，它会沿着作用域链向上查找，直到找到该变量或到达全局执行上下文。

示例

var globalVariable = "global";

function parentFunction() {
  var parentVariable = "parent";

  function childFunction() {
    var childVariable = "child";

    console.log(globalVariable); // "global"
    console.log(parentVariable); // "parent"
    console.log(childVariable); // "child"
  }

  childFunction();
}

parentFunction();