动图学 JavaScript 之:作用域链(Scope Chain)

一个例子

今天我们来用介绍一下 JS 中的作用域链,先来看一段代码:

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,然后返回了一个包含 nameagecity 的字符串:

Sarah is 22 and lives in San Francisco

但是 getPersonInfo 这个函数中并没有 city 变量,那么它是怎么访问到 city 的呢?

首先,不同的执行上下文会分配不同的内存空间。我们有默认的全局上下文(浏览器中是 window,Node 中是 global),函数 getPersonInfo 在被调用时也会创建一个 本地上下文。每个执行上下文都有一个 作用域(链)

对于函数 getPersonInfo,它的作用域链就像下图这样:

1-local.png

作用域链基本上是对 对象(即上图中的 activation object 和 global object)的 “引用链”,这些对象中包含了对该执行上下文中 可引用的变量及其他作用域 的引用。并且,作用域链是在执行上下文被创建的时候创建的,即这一切发生在 运行时

简单来说,作用域(链)里面存储着执行上下文需要访问的变量。

然而,本篇先不讲 activation object 或者 执行上下文,我们先把注意力放在 作用域(链) 上!

本地作用域

在下图的例子中,执行上下文中的键值对即代表了作用域链对变量的引用。

2-scope.png

全局执行上下文中有三个变量:

  • name = Lydia
  • age = 21
  • city = San Francisco

本地执行上下文中有两个变量:

  • name = Sarah
  • age = 22

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

3-local-scope.gif

本地作用域链可以访问到 nameage ,它们的值分别是 Sarah22。但是当需要访问 city 时会发生什么呢?

全局作用域

为了访问 city 变量,JS 引擎会 顺着作用域链查找。可以说 JS 引擎是个耿直 boy,你提的要求他不会轻易放弃,他会沿着作用域链一直找 city 变量,直到找到顶层 global object 位置。

4-global-scope.gif

在全局作用域,由于我们定义了 city 的值为 San Francisco。所以函数拿到了这个值,并且打印出了 Sarah is 22 and lives in San Francisco

三维模型

我们说顺着作用域链查找,可能说向上和向下都有歧义,那么就统一更正为向 外层 作用域查找好了!看下面的 3D 图:

5-fall1.png

或者更多层的话:

6-fall2.png

最初的例子

我们再来看最开始的例子:

7-example.png

上图和最开始的例子几乎是一样的,只不过把 city 定义在了函数 getPersonInfo 中。我们还没有调用函数 getPersonInfo,所以本地作用域也没有创建。那么当我们在全局作用域中访问 nameagecity 时:

8-backwards.gif

程序抛出 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
  }
} 

用虚线表示作用域如下:

9-example-scopes.png

我们有一个全局作用域、一个函数作用域和两个块级作用域。也正是由于块级作用域的存在,所以我们能定义 message 两次。

总结

我们来回顾一下:

  1. 你可以将“作用域链”视为对 可在当前上下文中访问的值 的引用链。
  2. 作用域还可以让我们重用变量名,只要不在同一个作用域中,变量名就可以重复。

本篇就到这里啦,本文是翻译的系列文章:

参考资料


本文首发于公众号:码力全开(codingonfire)

欢迎关注获取最新内容哦~

codingonfire.jpg


码力全开
尽我所能为大家带来有用的东西~ 欢迎关注公众号:「码力全开」

You know nothing, SpongeBob.

6.2k 声望
4.5k 粉丝
0 条评论
推荐阅读
如何批量 git pull 某个文件夹中的 git 仓库?
上代码用 shell 脚本可以比较方便实现:首先新建脚本:pull-all.sh {代码...} 填入如下内容: {代码...} 然后改一下权限: {代码...} 接下来就可以直接运行了: {代码...} 也可以不跟参数,会提示你输入目录~注意...

savokiss阅读 1.5k

封面图
手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.8k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

You know nothing, SpongeBob.

6.2k 声望
4.5k 粉丝
宣传栏