【动画演示】：JS 做用域链不在话下

做者：Lydia Hallie
译者：前端小智
来源：dev

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

---

本篇咱们来看看啥是做用域以及做用域链，首先，来看看下面的代码：

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())
// Sarah is 22 and lives in San Francisco

咱们调用getPersonInfo函数，它返回一个包含姓名、年龄和城市变量值的字符串:Sarah is 22 and lives in San Francisco。可是,getPersonInfo函数中不包含变量 city，它是怎么取到 city 的值？

首先，JS 引擎为不一样的上下文设置内存空间。咱们有默认的全局上下文(浏览器中的window、Node 中的global )，以及已经调用的getPersonInfo函数的本地上下文，每一个上下文还有一个做用域链。

对于getPersonInfo函数，做用域链看起来是这样的：

做用域链基本上是对对象的“引用链”，其中包含对在执行上下文中可引用的值(和其余做用域)的引用。做用域是在建立执行上下文时建立的，这说明它是在运行时建立的。

在本文中，不会讨论激活对象或执行上下文，咱们只关注做用域。 在如下示例中，执行上下文中的键/值对表示使做用域链对变量的引用。

全局执行上下文(GLOBAL EXECUTION CONTEXT)的做用域链引用了3个变量:值为Lydia的name、值为21的age和值为San Francisco的city。在本地执行上下文(LOCAL EXECUTION CONTEXT)中，咱们引用了两个变量:name值为Sarah, age值为22。

当咱们试图访问getPersonInfo函数中的变量时，JS引擎首先检查局部做用域链。

本地做用域链有一个name和age的引用!name的值是Sarah, age的值是22。可是如今，当它试图访问city变量时会发生什么？

为了找到变量city的值，JS 引擎沿着做用域链向上查找，直到在外部做用域内为找到了一个city的值，本地做用域有一个引用，在本例中是全局对象。

在全局上下文中，咱们用San Francisco的值声明了变量city，所以有一个对变量city的引用。如今咱们有了变量的值，函数getPersonInfo能够返回字符串Sarah is 22 and lives in San Francisco 。

咱们能够沿着做用域链向下走，可是咱们不能沿着做用链向上走，这可能会让人困惑，由于咱们大都会说“向上”而不是“向下”，因此换一种说法:你能够进入外部做用域，但不能进入内部做用域，能够把它想象成瀑布模型：

更深的嵌套：

以这段代码为例：

这个跟上个例子代码几乎是同样的，可是有一个很大的区别:咱们如今只在getPersonInfo函数中声明city，而不在全局做用域中。这里也没有调用getPersonInfo函数，因此也没有建立本地上下文。然而，咱们试图在全局上下文中访问name、age和city的值。

这里分抛出一个ReferenceError异常，由于 JS 在全局范围内找不到一个名为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 ，由于message 变量处在不一样的做用域中。

快速回顾：

• 能够将“做用域链”看做是在当前上下文中访问的值的引用链。
• 做用域还能够重用在该该做用域链上定义的变量名，由于它会沿着做用域链向上查找。

---

原文：https://dev.to/lydiahallie/ja...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

---

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。