开发中我们可能会不小心将写多个相同名称的变量，也经常会写一个递归调用的方法，

上述示例中程序执行顺序如下图，程序会按照顺序执行第一个子元素内部所有的程序，当最底层执行结束后，会逐渐抛出返回值，然后执行第二个子元素的程序

要解释清楚上述原因，除了JS的单线程顺序执行外，还需要了解什么是上下文和作用域链

上下文又分为

  • 全局上下文：最基础、最外层的一个上下文，变量不存在与任何一个函数或者｛｝内，this对应的是window对象
  • 函数上下文：每次执行函数时，都会生成一个函数上下文，函数内定义的变量只可以被函数内部被访问，同一个函数执行多次，每次都会创建新的函数上下文
  • 块级上下文：｛｝内部执行时生成的一个上下文，比如在for if 语句中通过let 和const创建的变量以及方法等，同样只能被{}内部访问

作用域链：每次生成上下文都会生成一个作用域链，如果变量在当前上下文访问不到，则会根据作用域链向上寻找，直至全局上下文。

上列详细的步骤为：

1. 生成全局上下文压入到栈中，同时生成一个作用域链

2. 执行到1-0时，生成上下文同样压入到栈中，生成作用域链，同时将该链与父级作用域链进行关联

3. 执行到1-0-0结束后，则会顺序执行下一个循环到1-0-1，都结束后会将控制器弹出到父级上下文，同时将1-0-0、1-0-1的变量释放以供垃圾回收

JS上下文和作用域链的更多相关文章

  1. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

  2. 谈JS中的作用域链与原型链（1）

    学习前端也有一段时间了,觉得自己可以与大家分享一些我当初遇到疑惑的东西,希望能给对此问题有疑惑的朋友带来一点帮助. 先来普及一下JS的概念(不要嫌我啰嗦,可能一些朋友开始学习JS是跟着视频和写好的代码 ...

  3. 第十八篇 js高级知识---作用域链

    一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...

  4. Javascript 运行上下文和作用域链

    一.作用域Scope和上下文Context 在javascript中,作用域scope和上下文context是两个不同的概念.每个函数调用都会伴随着scope和context,从本质上来说,scope ...

  5. JS高级心法——作用域链

    首先我们来看两个js中的代码:    <script type="text/javascript"> var c=5; function t1(){ var d=6 f ...

  6. JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

    补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...

  7. js通过沿着作用域链还是原型链查找变量

    这是一道非常典型的JS闭包问题,结果和具体的解析请看这里. 对于其中的`函数作用域链的问题`博主似乎没有解释清楚,有一些疑问:js中的变量到底是沿着作用域链还是原型链查找呢? 首先,要分清作用域链与原 ...

  8. 浅析 JS 中的作用域链

    作用域链的形成 在 JS 中每个函数都有自己的执行环境,而每个执行环境都有一个与之对应的变量对象.例如: var a = 2 function fn () { var a = 1 console.lo ...

  9. 深入理解js——自由变量和作用域链

    自由变量:在A作用域中使用变量X,却没有在A作用域中声明(在其他作用域中声明),对于A作用域来说X就是一个自由变量. var x=10; function fn(){ var b=20; consol ...

  10. (O)js核心：作用域链

    作用域 在一个函数被调用的时候,函数的作用域才会存在.此时,在函数还没有开始执行的时候,开始创建函数的作用域:   函数作用域的创建步骤: 1.函数形参的声明. 2.函数变量的声明. 3.普通变量的声 ...

随机推荐

  1. Head First Java学习：第八章-接口和抽象类

    第八章:接口和抽象类 深入多态 1.抽象类:有些类不应该被初始化 在类声明前面加上抽象类的关键字,abstract. 防止类被初始化,即不能被"new"创建该类的实例(要求) 还是 ...

  2. URL路径参数转换器

    作用和基本使用 作用: 用于校验请求的路由参数中的值是否符合符合指定的规则. 这个使用方法和django中的路由参数转换器是差不多的. 至于为什么用路径参数转换器,原因和django中的一样,虽然你可 ...

  3. 数字孪生结合GIS会为智慧农业带来怎样的改变？

    数字孪生是一种创新的技术,它通过将现实世界的物理实体与数字模型相结合,实现了实时.动态的仿真和预测.而地理信息系统(GIS)则是一种用于收集.管理.分析和展示地理数据的工具.当这两种技术相互融合时,将 ...

  4. 基于python的cat1模块的AT指令串口通信解析

    一 前记 使用cat1模块做产品的过程中,遇到了不少问题.其中很重要的一个就是怎么测试单个模块的好坏.这里笔者专门写了一个工具,来测试cat1模块的是否好用,这里做一个分享吧.   二 源码解析 这个 ...

  5. 内网& 公网

    内.外网是相对于防火墙而言的,在防火墙内部叫做内网,反之就是外网.在一定程度上外网等同于公网,内网等同于私网. 内网IP是什么? 内网IP简单理解就是局域网IP地址.内网地址即局域网(LAN),内网的 ...

  6. 一键打包,随时运行,Python3项目虚拟环境一键整合包的制作(Venv)

    之前我们介绍了如何使用嵌入式 Python3 环境给项目制作一键整合包,在使用嵌入式 Python 环境时,通常是作为另一个应用程序的一部分,而Python3虚拟环境是为了在开发过程中隔离项目所需的 ...

  7. MySQL运维实战（1.1）安装部署：使用RPM进行安装部署

    作者:俊达 我们在生产环境部署mysql时,一般很少使用RedHat Package Manager(RedHat软件包管理工具).用rpm或或者其他包管理器安装mysql有其好处,例如安装简单,并且 ...

  8. 通用 Mapper 的批量插入实现

    具体的 SQL 模板实现如下所示: import org.apache.ibatis.mapping.MappedStatement; import tk.mybatis.mapper.MapperE ...

  9. 微信小程序常用代码

    在微信小程序中,可以使用 wx.showToast.wx.showLoading 和 wx.showModal 等方法来显示不同类型的提示框 wx.showToast:用于显示一条浮动的提示框,一般用 ...

  10. 云小课 | SA基线检查—给云服务的一次全面“体检”

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 华为云态势感知( ...