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

咱们来看看如下代码：

const name = "Lydia"const age = 21const 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 = 21function 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
本文由博客一文多发平台 OpenWrite 公布！