前端JavaScript篇之对执行上下文的理解

news2024/11/15 8:39:04

目录

  • 对执行上下文的理解
    • 创建执行上下文


对执行上下文的理解

当我们在执行JavaScript代码时,JavaScript引擎会创建并维护一个执行上下文栈来管理执行上下文。执行上下文有三种类型:全局执行上下文、函数执行上下文和eval函数执行上下文。

在写代码的时候,我们首先会定义全局变量,这些变量会被放在全局执行上下文中。全局执行上下文在代码执行之前就已经存在,并且是整个程序的起点。在全局执行上下文中,JavaScript引擎会创建一个全局对象(通常是window对象)作为变量对象,同时将this指向该全局对象。举个例子:

var globalVariable = 'I am a global variable'

function globalFunction() {
  console.log('I am a global function')
}

console.log(globalVariable) // 输出:I am a global variable
globalFunction() // 输出:I am a global function

请添加图片描述

在这个例子中,变量globalVariable和函数globalFunction被定义在全局上下文中。我们可以在全局上下文中直接访问和使用它们。

当我们调用一个函数时,会创建一个新的函数执行上下文。函数执行上下文与全局执行上下文类似,但有一些差异。函数执行上下文除了包含变量对象和this指向,还包括函数的参数和内部声明的变量和函数。举个例子:

function outer() {
  var outerVariable = 'I am an outer variable'

  function inner() {
    var innerVariable = 'I am an inner variable'
    console.log(outerVariable) // 可以访问外部函数的变量
    console.log(innerVariable) // 可以访问自己的变量
  }

  inner()
}

outer()

请添加图片描述

在这个例子中,outer函数内部定义了一个变量outerVariable,并声明了一个内部函数inner。当我们调用outer函数时,会创建outer函数的执行上下文。其中的变量outerVariable和函数inner都属于该执行上下文。在inner函数中,我们可以通过作用域链访问到它们。

需要注意的是,每个函数调用都会创建一个新的函数执行上下文,它们是独立的,拥有自己的变量和参数。当函数执行完毕后,它所在的函数执行上下文会从执行上下文栈中被弹出。

总结一下:

  • 执行上下文是用来管理和维护JavaScript代码执行时的环境。
  • 有三种类型的执行上下文:全局执行上下文、函数执行上下文和eval函数执行上下文(不常用)。
  • 执行上下文栈用来记录各个执行上下文的顺序和层级关系。
  • 在创建阶段,会创建和初始化执行上下文,并将变量对象、this值和作用域链等相关信息设置好。
  • 在执行阶段,会执行具体的代码,并处理变量赋值、函数调用等操作。

在编写代码时,了解执行上下文的概念可以帮助我们理解变量的作用域、函数的闭包以及代码的执行顺序。它是理解JavaScript代码执行原理的关键之一。

创建执行上下文

var x = 10

function foo(y) {
  var z = 20
  console.log(x + y + z)
}

foo(5)

请添加图片描述

让我们一步一步地创建执行上下文。

  1. 全局执行上下文的创建:

    • 在全局上下文中,JavaScript引擎会创建一个全局变量对象,这里我们将它称为Global_VO(Variable Object)。
    • 将全局上下文中的变量和函数声明添加到Global_VO。
    • 在这个例子中,我们声明了一个变量x,并将其值设为10。
    • 我们还声明了一个函数foo,它也会被添加到Global_VO中。
    • 最后,JavaScript引擎会将this关键字指向全局对象(通常是window对象)。
  2. 函数执行上下文的创建:

    • 当我们调用foo函数时,JavaScript引擎创建一个新的执行上下文,称为Function_Context。
    • 在Function_Context中,JavaScript引擎会创建一个空的变量对象,我们将它称为Function_VO。
    • 将函数的参数和内部声明的变量添加到Function_VO。
    • 在这个例子中,我们有一个参数y和一个变量z。
    • 参数y的值是通过函数调用传递的,这里是5。
    • 变量z被声明但还未被赋值,所以它的值是undefined。
  3. 执行阶段:

    • 在执行阶段,JavaScript引擎会为变量对象中的变量赋值。
    • 在全局上下文中,将变量x的值设为10。
    • 在函数执行上下文Function_Context中,将变量z的值设为20。

输出结果为35,这是因为在函数foo的执行上下文中,可以访问到全局上下文中的变量x,以及函数的参数y和内部变量z。将它们相加并输出结果。

需要注意的是,创建执行上下文的过程分为两个阶段:创建阶段和执行阶段。在创建阶段,会创建相应的变量对象,并进行变量声明和函数声明。在执行阶段,会对变量进行赋值和执行具体的代码逻辑。

总结:

  • 全局执行上下文是代码执行的起点,它包括全局变量和函数的声明,并且this指向全局对象(通常是window对象)。
  • 函数执行上下文是每次函数调用时创建的,它包括函数的参数、内部变量等,并且可以访问上层执行上下文中的变量。
  • 在执行阶段,实际的代码逻辑被执行,变量被赋值,并得到最终的结果。

在JavaScript中,每当函数被调用时,都会创建一个新的函数执行上下文。与全局执行上下文类似,函数执行上下文也有自己的变量定义和函数声明。但是与全局执行上下文不同,函数执行上下文会额外包含this、arguments和函数的参数

在理解执行上下文的过程中,对于创建阶段和执行阶段的区分是很关键的。这有助于我们理解变量的作用域、函数的闭包以及代码的执行顺序。

持续学习总结记录中,回顾一下上面的内容:
执行上下文是JavaScript中的一个概念,用于描述代码在运行时的环境和上下文信息。它可以理解为代码执行时的“现场”,包含了变量、函数、参数以及其他相关的执行信息。
在JavaScript中,我们有全局执行上下文和函数执行上下文。全局执行上下文是整个程序的起点,包含了全局变量和函数的声明。而函数执行上下文是每次函数调用时创建的,包含了函数内部的变量、函数声明以及特殊的关键字(如this、arguments)。
执行上下文的创建分为两个阶段:创建阶段和执行阶段。在创建阶段,JavaScript引擎会创建变量对象,存储变量和函数的声明,并设置上下文相关的信息。在执行阶段,代码会被逐行执行,变量被赋值和计算,函数被调用。
执行上下文的概念帮助我们理解JavaScript中的作用域、闭包和函数调用等机制。它决定了变量的可见性和生命周期,以及函数内部对外部变量的访问。
通过深入理解执行上下文,我们能够更好地理解和调试JavaScript代码,写出更清晰和可靠的程序。

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

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

相关文章

第十三、十四个知识点:用javascript获取表单的内容并加密

我们先来写一段代码&#xff1a; <body><form action"#" method"post">//写一个表单<span>用户名&#xff1a;</span><input type"text" id"username" name"username"><span>密码&a…

BGP 双归不同运营商并且客户之间互为主备的部署实验

一、拓朴&#xff1a; 要求&#xff1a; 1、双方 ISP 均不得将客户 AS 做为穿越 AS 2、对于客户业务的出流量&#xff1a;客户 AS100 和 200 访问 ISP 时&#xff0c;AS100优选从 Line-1 线路&#xff0c;AS200 优选从 Line-2 访问&#xff0c;但当 Line-1 和 …

Springboot+vue的社区智慧养老监护管理平台设计与实现(有报告),Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的社区智慧养老监护管理平台设计与实现&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的社区智慧养老监护管理平台设…

springboot项目启动报错:dynamic-datasource can not find primary datasource

项目启动报错信息 Caused by: com.baomidou.dynamic.datasource.exception.CannotFindDataSourceException: dynamic-datasource can not find primary datasourceat com.baomidou.dynamic.datasource.DynamicRoutingDataSource.determinePrimaryDataSource(DynamicRoutingDat…

Prime(VulnHub)

Prime 文章目录 Prime1、nmap2、web渗透随便看看首页隐写查看目录爆破gobusterferoxbusterdirsearchdirb whatwebsearchsploit WordPress 5.2.2/dev/secret.txtFuzz_For_Webwfuzzimage.phpindex.php location.txtsecrettier360文件包含漏洞包含出password.txt尝试ssh登入尝试登…

AD9361多片同步设计方法

本文基于ZC706FMCOMMS5的平台&#xff0c;介绍了多片AD9361同步的方法。并将该设计移植到自行设计的ZYNQ70354片AD9361(实现8路同步收发)的电路板上。本设计采用纯逻辑的方式&#xff0c;仅使用了ZYNQ芯片的PL部分。 9361多芯片同步主要包括基带同步和射频同步两大块任务。其中…

idea自带的HttpClient使用

1. 全局变量配置 {"local":{"baseUrl": "http://localhost:9001/"},"test": {"baseUrl": "http://localhost:9002/"} }2. 登录并将结果设置到全局变量 PostMapping("/login")public JSONObject login(H…

Mac电脑到手后的配置

一、Homebrew 1、Homebrew安装 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 桌面的Old_Homebrew文件夹&#xff0c;没有你需要的可以删除。 2、Homebrew卸载 /bin/zsh -c "$(curl -fsSL https://gitee.com/c…

2023年ABC123公众号年刊下载(PDF电子书)

Part1 前言 大家好&#xff0c;我是ABC_123。2023年公众号正式更名为"希潭实验室"。除了分享日常红队攻防、渗透测试技术文章之外&#xff0c;重点加强了APT案例分析方面的内容。公众号关注度得到进一步提升&#xff0c;关注人数已达到3万5千人。原计划在2023年编写…

【FPGA开发】Modelsim和Vivado的使用

本篇文章包含的内容 一、FPGA工程文件结构二、Modelsim的使用三、Vivado的使用3.1 建立工程3.2 分析 RTL ANALYSIS3.2.1 .xdc约束&#xff08;Constraints&#xff09;文件的产生 3.3 综合 SYNTHESIS3.4 执行 IMPLEMENTATION3.5 烧录程序3.6 程序固化3.6.1 SPI约束3.6.2 .bin文…

【GAMES101】Lecture 19 透镜

目录 理想的薄透镜 模糊 利用透镜模型做光线追踪 景深&#xff08;Depth of Field&#xff09; 理想的薄透镜 在实际的相机中都是用的一组透镜来作为这个镜头 这个因为真实的棱镜无法将光线真正聚焦到一个点上&#xff0c;它只能聚在一堆上 所以方便研究提出了一种理想化的…

vue的8大生命周期

第072个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使用&#xff0c;computed&a…

移动端基础-响应式开发:Bootstrap前端开发框架

Bootstrap使用 目前只考虑样式库CSS布局效果 步骤&#xff1a; 1.创建文件 2.创建HTML骨架结构 3.引入相应样式文件 4.书写内容 创建文件 到官网下载好bootstrap.js 创建文件夹&#xff1a; 将样式引入 直接查找css样式&#xff1a; 注意&#xff1a;不同的样式是通过类…

倒计时61天

M-智乃的36倍数(normal version)_2024牛客寒假算法基础集训营3 (nowcoder.com) //非ac代码,超时了,54.17/100#include<bits/stdc.h> using namespace std; const int N1e55; const int inf0x3f3f3f3f; #define int long long int n; string s1[N]; void solve() {cin>…

【VTKExamples::PolyData】第二十三期 InterpolateMeshOnGrid

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例InterpolateMeshOnGrid,并解析接口vtkProbeFilter 、vtkWarpScalar & vtkDealuany2D等多个接口,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步!…

Stable Diffusion 模型下载:ToonYou(平涂卡通)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 ToonYou 是一个平涂风格的卡通模型&#xff0c;它的画风独特、光感强烈、画面表现力强、场景结构完整&#xff0c;一张张图犹如动画电影截图&#xff0c;非常值得推…

C#静态数组删除数组元素不改变数组长度 vs 动态数组删除数组元素改变数组长度

目录 一、使用的方法 1.对静态数组删除指定长度并不改变数长度的方法 &#xff08;1&#xff09;静态数组 &#xff08;2&#xff09;对静态数组删除元素不得改变其长度 2.对动态数组删除指定长度并改变数长度的方法 &#xff08;1&#xff09;动态数组 &#xff08;2&a…

ownips的自救指南:一次账号封停事件的心路历程与解决策略

前言 小明以前是全球500强电商类公司的运营工作人员&#xff0c;在事业的上升期日入斗金、年薪百万&#xff0c;后面分钱时被产品、总监、老板瓜分了大头&#xff0c;大气都大敢出。由于小明掌握了核心技术&#xff0c;从联系品牌供应商、电商选品、用户行为调研、用户画像收集…

详解Redis哨兵模式下,主节点掉线而重新选取主节点的流程

⭐最核心的结论&#xff1a;所谓选举的过程不是直接选出新的主节点&#xff0c;而是先在哨兵节点中选出 leader &#xff0c;再由 leader 负责后续主节点的指定。 假定当前环境&#xff1a; 三个哨兵(sentenal1, sentenal2, sentenal3)一个主节点(redis-master)两个从节点(red…

Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerManager.cs using System.Collections; using System.Collections.G…