图解JavaScript作用域与作用域链

现在该讲作用域链了。在本文中，我假设你了解执行上下文的基础知识：尽管如此，我也会很快就此发表一篇文章。😃

我们来看看如下代码：

const name = "Lydia"
const age = 21
const city = "San Francisco"

function getPersonInfo() {
  const name = "Sarah"
  const age = 22

  return `${name} is ${age} and lives in ${city}`
}

console.log(getPersonInfo())

我们在调用getPersonInfo()函数，该函数返回一个字符串，其中包含name、age和city变量的值：Sarah is 22 and lives in San Francisco。不过，getPersonInfo()函数并没有包含名为city的变量，它是如何知道city的值的呢？

首先，内存空间是为不同的上下文设置的。我们有默认的全局上下文（global context）（在浏览器中是window，在Node中是global），以及针对已被调用的getPersonInfo()函数的本地上下文（local context）。每个上下文还有一个作用域链（scope chain）。

对于getPersonInfo()函数，作用域链看起来像这样（不要担心，现在还不需要完全搞清楚）：

作用域链基本上是对对象的“引用链”，这些对象包含对在该执行上下文中可引用的值（和其他作用域）的引用。（⛓：“嘿，这些都是你可以在此执行上下文中引用的所有值”）。作用域链是在创建执行上下文时创建的，这意味着它是在运行时创建的！

但是，在本文中，我一般不会讨论活动对象（Activation Object）或执行上下文（execution context），我们只关注作用域！在如下的示例中，执行上下文中的键/值对表示作用域链中含有的对变量的引用。

全局执行上下文的作用域链有对3个变量的引用：值为Lydia的name，值为21的age，以及值为San Francisco的city。在本地执行上下文中，有对2个变量的引用：值为Sarah的name，以及值为22的age。

当我们试图访问getPersonInfo()函数中的变量时，引擎会首先检查本地作用域链。

本地作用域链中有对name和age的引用！name的值为Sarah，age的值为22。但是现在，试图访问city时候会发生什么？

为了找到city的值，引擎会沿着作用域链向下找。这基本上只是意味着引擎不会轻易放弃：它会努力为你看看能否在本地作用域引用的外层作用域中找到变量city的值，在本例中，外层作用域是global对象。

在全局执行上下文中，我们声明了变量city，其值为San Francisco，因此全局执行上下文中有一个对变量city的引用。现在我们有了该变量的值，函数getPersonInfo()就可以返回字符串Sarah is 22 and lives in San Francisco 🎉。

我们可以沿着作用域链向下找，但是不能沿着作用域链向上找。好吧，这可能会令人困惑，因为有人说的是向上而不是向下，所以我要重新表述一下：向外层作用域方向找，而不是向更内层作用域方向找。我喜欢将这用图形表示为一种瀑布：

甚至更深：

下面我们以这段代码为示例。

代码几乎是一样的，不过有一个很大的不同点：现在我们只在getPersonInfo()函数中声明了city变量，但在全局作用域中没有声明。我们没有调用getPersonInfo()函数，因此也没有创建本地执行上下文。但是，我们试图在全局执行上下文中访问name、age和city的值。

然后它就抛出了一个ReferenceError错误！在全局作用域中找不到一个对变量city的引用，也没有可以查找的外层作用域，并且它不能沿着作用域向上查找。

这样，我们就可以把作用域作为保护变量并重用变量名的一种方法。

除了全局和本地作用域，还有一个块作用域。用let或者const关键字声明的变量的作用域为最接近的大括号（{``}）。

const age = 21

function checkAge() {
  if (age < 21) {
    const message = "You cannot drink!"
    return message
  } else {
    const message = "You can drink!"
    return message
  }
}

可以把作用域用图形表示为：

这里我们有一个全局作用域，一个函数作用域和两个块作用域。我们能两次声明变量message，因为该变量的作用域范围是大括号内。

下面快速回顾一下：

可以把作用域链看作是对我们可以在当前执行上下文中可以访问的值的一个引用链。
作用域还让重用在作用域链向下更深层次定义的变量名成为可能，因为变量名只能沿着作用域向下找，而不能向上找。

关于作用域和作用域链就写到这里了！

原文 by Lydia Hallie：https://dev.to/lydiahallie/javascript-visualized-scope-chain-13pd