变量对象中的变量查找顺序: 作用域链

2023-11-24 14:58:42

变量对象中的变量查找顺序: 作用域链

作为前端开发人员，对于作用域链的理解是十分重要的。作用域链了变量在 JavaScript 中的查找顺序。当我们试图访问一个变量时，JavaScript 会沿着作用域链向上查找，直到找到该变量或到达全局作用域。

作用域链是如何工作的？

作用域链是从当前执行上下文开始，一直向上到全局执行上下文。每个执行上下文都有自己的变量对象，这些变量对象存储着该执行上下文中声明的变量。当我们试图访问一个变量时，JavaScript 会沿着作用域链向上查找，直到找到该变量或到达全局作用域。

例如，考虑以下代码：

function outer() {
  var a = 1;

  function inner() {
    var b = 2;

    console.log(a); // 1
    console.log(b); // 2
  }

  inner();
}

outer();

在这个例子中，outer() 函数的作用域链是 outer() 函数的变量对象和全局执行上下文。inner() 函数的作用域链是 inner() 函数的变量对象、outer() 函数的变量对象和全局执行上下文。

当我们调用 inner() 函数时，JavaScript 会沿着作用域链向上查找变量 a。首先，它会在 inner() 函数的变量对象中查找，但它找不到。然后，它会在 outer() 函数的变量对象中查找，它会找到 a 并将其值输出到控制台。

作用域链有什么用？

作用域链允许我们控制变量的可见性。我们可以通过使用不同的作用域来创建不同的变量环境。这可以帮助我们组织代码并防止变量冲突。

例如，考虑以下代码：

function outer() {
  var a = 1;

  function inner() {
    var a = 2;

    console.log(a); // 2
  }

  inner();
  console.log(a); // 1
}

outer();

在这个例子中，inner() 函数有一个自己的 a 变量，而 outer() 函数也有一个自己的 a 变量。当我们调用 inner() 函数时，JavaScript 会沿着作用域链向上查找变量 a。首先，它会在 inner() 函数的变量对象中查找，它会找到 a 并将其值输出到控制台。然后，它会在 outer() 函数的变量对象中查找，它会找到 a 并将其值输出到控制台。