可视化的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函数,它返回一个包含姓名、年龄和城市变量值的字符串:Sarah is 22 and lives in San Francisco。但是,getPersonInfo函数中不包含变量 city,它是怎么取到 city 的值?

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

对于getPersonInfo函数,作用域链看起来是这样的:

1.png

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

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

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

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

本地作用域链有一个nameage的引用!name的值是Sarah, age的值是22。但是现在,当它试图访问city变量时会发生什么?

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

4.gif

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

我们可以沿着作用域链向下走,但是我们不能沿着作用链向上走,这可能会让人困惑,因为我们大都会说“向上”而不是“向下”,所以换一种说法:你可以进入外部作用域,但不能进入内部作用域,可以把它想象成瀑布模型:

更深的嵌套:

以这段代码为例:

这个跟上个例子代码几乎是一样的,但是有一个很大的区别:我们现在只在getPersonInfo函数中声明city,而不在全局作用域中。这里也没有调用getPersonInfo函数,所以也没有创建本地上下文。然而,我们试图在全局上下文中访问nameagecity的值。

8.gif

这里分抛出一个ReferenceError异常,因为 JS 在全局范围内找不到一个名为city的变量的引用,因为已处于顶部作用域,也没法向上的作用域查找了。

通过这种方式,我们可以将作用域用作“保护”变量并重新使用变量名的方法。

除了全局作用域和局部作用域之外,还有一个块作用域。使用letconst关键字声明的变量的作用域就是块作用域。

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/javascript-visualized-scope-chain-13pd

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?JavaScript是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

智能数据可视化的5个步骤

如今,许多企业正在利用模型、数据分析、数据可视化和仪表板等措施实现数据驱动。例如商业领袖注重提升客户体验,技术领导者注重分析速度和网站指标,应用程序团队在其应用程序中嵌入分析程序等等。这意味着更多的开

打造高逼格、可视化的Docker容器监控系统平台

关于Docker技术的文章之前也断断续续写了几篇:Docker容器系列文章|Docker技术入门(一)Docker容器系列文章|Docker技术入门(二)Docker容器系列文章|这20个Docker

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

2021适合移动和桌面应用的JavaScript框架是什么

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 当听到JavaScript这个词的时候,“web开发”会一下子出现在我们的脑海中,因为JavaScript在很长一段时间里一直是web应

可视化编程是否真的没有未来?程序员:它有“七宗罪”

今天想聊聊可视化编程(visual-programming)的未来发展,喂喂,咱们这儿还没开始,各位大佬先别急着走啊您……确实,可视化这个概念跟任何技术并称,都是技术前沿、下一个风口、万亿市场的代名词

那个“炫酷狂拽”的数据可视化利器AntV 11.22版全新发布啦

导读AntV是一个数据可视化项目,也是一个团队,蚂蚁金服数据可视化团队,一群有爱有梦的人,怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行,希望成就智能时代全球领先的数据可视化解决方案,满足与日

2019值得关注的数据可视化工具TOP5

 数据可视化在数据分析过程中的扮演着非常重要的角色。对于数据科学家或数据分析师来说,以更直观、便于查看、甚至更吸引人的视觉效果来呈现数据是很重要的。数据可视化是一个有效的市场工具,通过这种方式,从海量

基于Pandas+ECharts的金融大数据可视化实现方案

前言最近无意中看到一篇文章,介绍的是在IPythonNotebook里实现ECharts的可视化效果。我个人对ECharts一直是推崇有加,是baidu发布的开源项目中我比较喜欢的一个,绝对是良心之作

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(七)——pairplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(六)——heatmap热力图

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(五)——lmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

变量作用域

变量分类:全局变量:在函数内部和外部皆可以正常访问在函数外部声明的变量(没有利用global进行声明的前提)仅能进行访问操作,不是完整的全局变量。 局部变量:在函数外部不能访问,只能在定义变量的局部环

总结我的Java朋友

推荐课程:java开发工程师--学习猿地精品课程 一、对于Java的认识学习Java,首先要知道Java是一门面向对象编程的语言,而我们之前学过C++,C++是C语言的继承,C++既可以进行C语言的过

一道阿里Web前端面试题看出你的JS基本功

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 //求出如下题目结果({}+{}).length([]+[]).length(function(){}).length这道题目乍一