JS基础之执行上下文

JS基础之执行上下文

  • 执行上下文
    • 顺序执行
    • 可执行代码
    • 执行上下文栈
    • 回顾上文

执行上下文

顺序执行

写个JavaScript的开发者都会有个直观的印象,那就是顺序执行:

var foo = function(){console.log('foo1')
}
foo(); //foo1
var foo = function(){console.log('foo2');
}
foo();//foo2

那这段呢?

function foo(){console.log('foo1');
}
foo(); // foo2
function foo(){console.log('foo2');
}
foo(); //foo2

打印的结果却是两个foo2
这是因为JavaScript引擎并非一行一行的分析和执行程序,而是一段一段的分析执行。当执行一段代码的时候,会进行一个“准备工作”,那这个“一段一段”中的“段”究竟是怎么划分的呢?
到底JavaScript引擎遇到一段怎样的代码时,才会做“准备工作”呢?

console.log(add2(1,2));//输出3
function add2(a,b){return a+b;
}
console.log(add1(1,1));//报错:add1 is not a function
var add1 = function(a,b){return a+b;
}
//用函数语句创建的函数add2,函数名称和函数体均被提前,在声明他之前就使用它。
//但是使用var表达式定义函数add1,只有变量声明提前了,变量初始化代码仍然在原来的位置,没有办法提前执行。

可执行代码

这就要说到JavaScript的可执行代码(executable code)的类型有哪些了?
其实很简单,就三种,全局代码、函数代码、eval代码
举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用更专业的说法,就叫做“执行上下文(execution context)”。

执行上下文栈

JavaScript引擎创建了执行上下文栈(Execution Context stack, ECS)来管理执行上下文,为了模拟执行上下文栈的行为,让我们定义执行上下文栈是一个数组:

ECStack = [];

试想当JavaScript开始要解释执行代码的时候,最先遇到的 就是全局代码,所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文,我们用globalContext表示它,并且只有当整个应用程序结束的时候,ECStack才会被清空,所以程序结束之前,ECStack最底部永远有个globalContext

ECStack = [globalContext
];

当JavaScript遇到下面的这段代码了:

function fun3(){console.log('fun3');
}
function fun2(){fun3();
}
function fun1(){fun2();
}
fun1();

当执行一个函数的时候,就会创建一个执行上下文,并且压入执行上下文栈,当函数执行完毕的时候,就会将函数的执行上下文从栈中弹出。知道了这样的工作原理,让我们来看看如何处理上面这段代码:

//伪代码
//fun1()
ESCtack.push(<fun1> functionContext);//入栈
//fun1中竟然调用了fun2,还要创建fun2的执行上下文
ESCtack.push(<fun2> functionContext);//入栈
//fun2还调用了fun3!
ESCtack.push(<fun3> functionContext);//入栈
//fun3执行完毕
ESCtack.pop();//出栈
//fun2执行完毕
ESCtack.pop();//出栈
//fun1执行完毕
ESCtack.pop();//出栈
//javascript接着执行下面的代码,但是ESCtack底层永远有个globalContext

回顾上文

//case 1
var scope = "global scope";
function checkscope(){var scope = "local scope";function f(){return scope;}return f();
}
checkscope();//case 2
var scope = "global scope";
function checkscope(){var scope = "local scope";function f(){return scope;}return f;
}
checkscope()();

两段代码执行的结果一样,但是两段代码究竟有哪些不同呢?
答案是:执行上下文栈的变化不一样。
模拟第一段代码:

ECStack.push(<checkscope> functionContext);//入栈
ECStack.push(<f> functionContext);//入栈
ECStack.pop();//出栈
ECStack.pop();//出栈

模拟第二段:

ECStack.push(<checkscope> functionContext);
ECStack.pop();//出栈
ECStack.push(<f> functionContext);//入栈
ECStack.pop()//出栈

这就是上文说到的区别。

好啦!这期就到这里啦,欢迎友友们留言讨论呐~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/214942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML面试题---专题一

文章目录 一、前言二、 HTML5 中 <header> 和 <footer> 标签的用途是什么&#xff1f;三、如何在 HTML 中嵌入 SVG&#xff08;可缩放矢量图形&#xff09;文件&#xff1f;四、解释 contenteditable 属性的用途五、如何创建随屏幕尺寸缩放的响应式图像&#xff1f…

线上扭蛋机小程序搭建,扭蛋与科技的完美结合

扭蛋机作为当下比较热门的一种盲盒玩法&#xff0c;在年轻人群体中非常受欢迎。随着经济的增长和人们生活水平的提高&#xff0c;人们对娱乐消费需求也在增加&#xff0c;扭蛋机的受众群体也在扩大。 目前线上扭蛋机小程序也获得了大众的青睐&#xff0c;扭蛋机小程序就是把线…

记录一下快速上手Springboot登录注册项目

本教程需要安装以下工具&#xff0c;如果不清楚怎么安装的可以看下我的这篇文章 链接: https://blog.csdn.net/qq_30627241/article/details/134804675 管理工具&#xff1a; maven IDE&#xff1a; IDEA 数据库&#xff1a; MySQL 测试工具&#xff1a; Postman 打开IDE…

AR-LDM原理及代码分析

AR-LDM原理AR-LDM代码分析pytorch_lightning(pl)的hook流程main.py 具体分析TrainSampleLightningDatasetARLDM blip mm encoder AR-LDM原理 左边是模仿了自回归地从1, 2, ..., j-1来构造 j 时刻的 frame 的过程。 在普通Stable Diffusion的基础上&#xff0c;使用了1, 2, .…

网工内推 | 项目经理专场,最高20K*13薪,软考证书优先

01 Trasen 招聘岗位&#xff1a;大项目经理&#xff08;医疗行业/HIS&#xff09; 职责描述&#xff1a; 1.负责项目按计划完成交付并顺利验收结项&#xff1b; 2.参与项目前期预算、评审、方案设计等&#xff1b; 3.负责具体项目实施&#xff0c;制定项目计划、组织项目资源、…

Web网站服务(二)

1、客户机地址限制。 Require all granted&#xff1a;表示允许所有主机访问。 Require all denied&#xff1a;表示拒绝所有主机访问。 Require local&#xff1a;表示仅允许本地主机访问。 Require [not] host <主机名或域名列表>&#xff1a;表示允许或拒绝指定主机或…

Web安全-SQL注入【sqli靶场第11-14关】(三)

★★实战前置声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将其信息做其他用途&#xff0c;由用户承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 0、总体思路 先确认是否可以SQL注入&#xff0…

轻空间助力中国高校实现场馆多功能一体化

中国高校在迎接体育、文艺、学术等多元化需求的同时&#xff0c;面临着场馆设施不足、建设成本高的难题。然而&#xff0c;随着轻空间&#xff08;江苏&#xff09;膜科技有限公司的崭新解决方案的引入&#xff0c;中国高校如苏州大学等正迎来一场场馆多功能一体化的革命。 创新…

电源小白入门学习4——LDO的选择与使用技巧

电源小白入门学习4——LDO的选择与使用技巧 LDO简介LDO工作原理LDO选型LDO并联问题LDO的新发展 上期我们介绍了开关电源系统中一些常见的元器件&#xff0c;这期我们来学习LDO的选择与使用技巧 LDO简介 LDO的全称是低压差线性稳压器&#xff08;Low Drop-Out Linear Regulator…

计算机病毒判定专家系统原理与设计《文字提取人工修正》

内容源于网络。网络上流转的版本实在是不易阅读&#xff0c; 又不忍神作被糟蹋故稍作整理&#xff0c;对于内容仍然有识别不准的地方&#xff0c;网友可留言&#xff0c;我跟进修改。 雷 军 &#xff08;武汉大学计算机系&#xff0c;430072) 摘要: 本文详细地描述了…

【UML】NO.2 UML必须了解的基础知识(举例)

目录 一、UML的构成 1.1 事物 1.2 关系 1.3 图 二、事物 2.1 结构事物 2.1.1 类&#xff08;class&#xff09; 2.1.2 接口 2.1.3 协作 2.1.4 用例 2.1.5 主动类 2.1.6 构件 2.1.7 节点 2.2 行为事物 2.2.1 交互 2.2.2 状态机 2.2.3 活动 2.3 分组事物 包 …

Unittest单元测试框架

Unittest介绍、单元测试用例的组织、测试用例的执行、测试用例的跳过 Unittest介绍 为什么要学习单元测试框架 测试用例的组织与运行需要单元测试框架的参与&#xff0c;从而满足不同测试场景的需要&#xff0c;单元测试框架提供了丰富的比较方法&#xff1a;实际结果与预期结…

Viewport Meta 标记:让网页适应各种设备的魔法符号

在我们用手机或平板电脑浏览网页时&#xff0c;你是否曾发现有些网页能够很好地适应屏幕&#xff0c;而有些却需要左右滑动才能完整显示内容&#xff1f;这就涉及到一个神奇的东西——Viewport Meta 标记。 最近本人在研究自适应的各自实现方法&#xff0c;比如media媒体查询、…

6个免费设计素材库,设计师都在用,赶紧收藏!

设计师应该都知道&#xff0c;在设计过程中找素材真的很费时间&#xff0c;有的时候全网翻遍都未必能找到自己想要的&#xff0c;以至于现在很多设计师都花钱去购买素材&#xff0c;你说要是拿去参赛或者商用还好&#xff0c;就拿平常设计来说你舍得花这个钱去买吗&#xff0c;…

亚马逊云科技Amazon Bedrock,现推出更多模型选择和全新强大功能

亚马逊云科技在re:Invent 2023上宣布推出Amazon Bedrock更多模型选择和强大功能&#xff0c;帮助客户更轻松地构建和规模化针对其业务定制的生成式AI应用程序。 Amazon Bedrock是一项全面托管的服务&#xff0c;用户可轻松访问来自AI21 Labs、Anthropic、Cohere、Meta、Stabili…

网页设计的灵感从哪来?试试这15个灵感网站

设计灵感网站是许多设计师必备的工具&#xff0c;因为它们提供了一个创造性的源泉&#xff0c;可以帮助设计师找到灵感和灵感&#xff0c;从而开发出惊人的设计。 推荐15个设计灵感网站&#xff0c;涵盖了平面设计、网页设计、UI设计等不同领域的设计。 即时设计资源广场 即…

Linux系统vim,gcc,g++工具使用及环境配置,动静态库的概念及使用

Linux系统vim&#xff0c;gcc&#xff0c;g工具使用及环境配置&#xff0c;动静态库的概念及使用 1. Linux编辑器-vim的使用1.1 vim的基本概念1.2vim的基本操作1.3vim正常模式命令集1.4vim末端模式命令集1.5简单的vim配置 2.Linux编译器-gcc/g的使用2.1 准备阶段2.2gcc的使用2.…

了解 git rebase

了解 git rebase 大多数人习惯使用 git merge 将更改从功能分支合并到主分支&#xff0c;但还有其他方法。我们是否曾经遇到过 git rebase 这个术语并想知道它是什么&#xff1f;或者我们可能听说过 rebase 和 merge &#xff0c;但不确定何时使用哪个&#xff1f;不用担心&am…

企业架构LB-服务器的负载均衡之Haproxy实现

企业架构LB-服务器的负载均衡之HAProxy实现 学习目标和内容 1、能够通过HAProxy实现负载均衡 ###1、介绍 Introduction HAProxy, which stands for High Availability Proxy, is a popular opensource software TCP/HTTP LoadBalancer and proxying solution which can be ru…