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

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

要解释清楚上述原因,除了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. GSM/WCDMA/LTE/NR网元架构

    1.GSM系统网元架构: 一套完整的蜂窝移动通信系统主要是由交换网络子系统(NSS).无线基站子系统(BSS).移动台(MS)及操作维护子系统(OMS)四大子系统设备组成. NSS 包括: MSC: ...

  2. 聊一聊 .NET高级调试 内核模式堆泄露

    一:背景 1. 讲故事 前几天有位朋友找到我,说他的机器内存在不断的上涨,但在任务管理器中查不出是哪个进程吃的内存,特别奇怪,截图如下: 在我的分析旅程中都是用户态模式的内存泄漏,像上图中的异常征兆已 ...

  3. 解决win10的wifi打不开或无法搜索到周围wifi的问题

    今天笔者遇到了一个比较奇葩的问题,就是笔记本电脑的wifi打不开了,即使打开了也是搜索不到周围的wifi的.这个问题一开始笔者没有发现,因为在暑假期间都是使用笔记本连接自己的手机热点进行上网的.然而暑 ...

  4. PyTorch 中自定义数据集的读取方法

    显然我们在学习深度学习时,不能只局限于通过使用官方提供的MNSIT.CIFAR-10.CIFAR-100这样的数据集,很多时候我们还是需要根据自己遇到的实际问题自己去搜集数据,然后制作数据集(收集数据 ...

  5. JOISC2020题解

    \(\text{By DaiRuiChen007}\) Contest Link A. Building 4 Problem Link 题目大意 给 \(2n\) 个数对 \((a_i,b_i)\), ...

  6. Roaring bitmaps

    Roaring bitmaps 最近看一篇文章,里面涉及到使用roaring bitmaps来推送用户广告并通过计算交集来降低用户广告推送次数.本文给出roaring bitmaps的原理和基本用法, ...

  7. 【Python】【OpenCV】【NumPy】图像和原始字节的转换

    学习完基础的图像算法,开始接触OpenCV学习: 灰度图中,一个像素点上的灰度级需要一个字节(byte,2^8,8 bit)进行存储,此时的灰度图是二维的.而当我们需要转换为彩色图时,即三维,便会产生 ...

  8. 【C#】【命名空间(namespace)】.NET6.0后支持的顶级语句使用问题

    创建C#项目且使用.Net6.0以上的版本时,默认code会使用顶级语句形式: 1.略去static void Main(String[ ] args)主方法入口: 2.隐式使用(即隐藏且根据代码所需 ...

  9. LLaMA大型语言模型

    LLaMA (Large Language Model Meta AI)是Meta公司发布的大型语言模型系列,近日LLaMA种子文件被合并到了GitHub 上,同时一些项目维护者给予了批准,目前该项目 ...

  10. C#汉诺塔递归算法实现

    目录: 一.什么是递归 1.先来看一下一个递归的例子 2.递归的基本原理 二.汉诺塔问题 1.汉诺塔的故事 2.回到编程,汉诺塔问题主要就是解决这个问题: 3.怎么解决汉诺塔问题 要解决汉诺塔问题就要 ...