共计 2100 个字符，预计需要花费 6 分钟才能阅读完成。
当初该讲作用域链了。在本文中，我假如你理解执行上下文的基础知识：尽管如此，我也会很快就此发表一篇文章。????
咱们来看看如下代码：
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
本文由博客一文多发平台 OpenWrite 公布！
