首页 > 其他分享 >JS上下文和作用域链

JS上下文和作用域链

时间:2023-04-11 16:02:10浏览次数:30  
标签:上下文 函数 JS 作用域 生成 执行 变量

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

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

 

要解释清楚上述原因,除了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,作用域,生成,执行,变量
From: https://www.cnblogs.com/codeOnMar/p/17287170.html

相关文章

  • js如何引入高德地图API?
    准备 成为开发者并创建key1、登录控制台登录 高德开放平台控制台,如果没有开发者账号,请 注册开发者。2、创建key进入应用管理,创建新应用,新应用中添加 key,服务平台选择 Web端(JS API)。 3、获取key和密钥创建成功后,可获取 key 和安全密钥。快速上手1、H......
  • js复制内容到粘贴板
    copyOrderNo(orderNo){navigator.clipboard.writeText(orderNo).then(()=>{this.$message.success('已复制订单号')});},copyOrderNo(orderNo){varinput=document.createElement('input')//创......
  • 【学习笔记】JS+VUE
    JSJS教程HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为简介1、什么是JS?JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由所有的现代浏览器执行。2、JS有哪些作用?直接写入H......
  • 直播平台源代码,js 时间戳转为日期格式
    直播平台源代码,js时间戳转为日期格式js把时间戳转为普通日记格式第一种 functiongetLocalTime(nS){     returnnewDate(parseInt(nS)*1000).toLocaleString().replace(/:\d{1,2}$/,'');   } ​第二种 functionadd0(m){returnm<10?'0'+m:m}func......
  • js检测页面关闭事件
    window.onbeforeunload=onbeforeunload_handler;window.onunload=onunload_handler;//页面关闭之前触发,在onunload事件之前触发,可以禁止onunload事件的触发functiononbeforeunload_handler(){varwarning="确认退出?";debugger......
  • ExtJS 轮播图UI组件(Carousel)
    ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html转载请注明出处:https://www.cnblogs.com/cqpanda/p/17177307.html更新记录2023年4月11日发布。Carousel组件(MordenToolkit)基本使用{xtype:'carousel',width:500,height:300,item......
  • ExtJS UI组件 - Titlebar
    ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html转载请注明出处:https://www.cnblogs.com/cqpanda/p/17183638.html更新记录2023年3月6日初始化。说明标题条组件。基本使用Ext.Viewport.add({xtype:'titlebar',docked:'top',title:......
  • ExtJS-UI组件-Toolbar
    ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html转载请注明出处:https://www.cnblogs.com/cqpanda/p/17183638.html更新记录2023年3月6日初始化。说明工具栏。基本使用{xtype:'panel',closable:true,draggable:true,title:'MyB......
  • ExtJS navigationview UI组件
    ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html转载请注明出处:https://www.cnblogs.com/cqpanda/p/17181663.html更新记录2023年1月5日初始化。NavigationViewisbasicallyaExt.ContainerwithaExt.layout.Cardlayout,soonlyoneviewcanbevis......
  • FastJson使用以及SerializerFeature枚举常量使用
    1.FastJson的使用首先导入maven依赖<!--下边依赖跟aop没关系,只是项目中用到了JSONObject,所以引入fastjson--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.70</version></depende......