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

目录

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


对执行上下文的理解

当我们在执行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 = 10function foo(y) {var z = 20console.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://xiahunao.cn/news/2774985.html

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

相关文章

代码随想录算法训练营第二十五天 |216.组合总和III,17.电话号码的字母组合(已补充)

剪枝操作讲解:(已观看) 带你学透回溯算法-组合问题的剪枝操作(对应力扣题目:77.组合)| 回溯法精讲!_哔哩哔哩_bilibili 216.组合总和III(已观看) 1、题目链接&#xf…

参观宋代建筑,感受传统魅力

为了更好地了解和传承中华文化,同时深入挖掘其在现代社会的传承与发展,2024年2月8日,曲阜师范大学计算机学院“古韵新声,格物致‘知’”社会实践队队员饶子恒深入考察中国传统建筑和文化,前往山东省菏泽市郓城县的水浒…

【Flink状态管理(二)各状态初始化入口】状态初始化流程详解与源码剖析

文章目录 1. 状态初始化总流程梳理2.创建StreamOperatorStateContext3. StateInitializationContext的接口设计。4. 状态初始化举例:UDF状态初始化 在TaskManager中启动Task线程后,会调用StreamTask.invoke()方法触发当前Task中算子的执行,在…

SolidWorks学习笔记——草图绘制的基本命令

目录 一、进入草图绘制 二、直线命令与删除命令 三、圆弧命令与矩形命令 四、槽口命令以及多边形命令 五、椭圆以及倒角命令 六。草图绘制中的剪裁命令 七、草图中的几何关系 八、草图绘制中的智能尺寸 九、从外部粘贴草图(CAD) 一、进入草图绘…

ongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(2)-Swagger框架集成

Swagger是什么? Swagger是一个规范且完整API文档管理框架,可以用于生成、描述和调用可视化的RESTful风格的 Web 服务。Swagger 的目标是对 REST API 定义一个标准且和语言无关的接口,可以让人和计算机拥有无须访问源码、文档或网络流量监测就…

Linux系统中HTTP代理的常见问题及解决方案

亲爱的Linux用户们,是不是有时候觉得HTTP代理就像是一个魔法盒子,让你在数字世界中自由穿梭?但是,就像所有的魔法物品一样,它也会偶尔出点小状况。今天,我们就来一起探讨一下Linux系统中HTTP代理的常见问题…

MyBatis之动态代理实现增删改查以及MyBatis-config.xml中读取DB信息文件和SQL中JavaBean别名配置

MyBatis之环境搭建以及实现增删改查 前言实现步骤1. 编写MyBatis-config.xml配置文件2. 编写Mapper.xml文件(增删改查SQL文)3. 定义PeronMapper接口4. 编写测试类1. 执行步骤2. 代码实例3. 运行log 开发环境构造图总结 前言 上一篇文章,我们…

Excel——合并计算

1.表格的合并计算(单张表格/多个表格) Q:请统计两个表格中各商品的总销量和总销售额,将结果放置在下方任意位置。 A:选择一个需要将合并计算数据放置区域的空白单元格 选择【数据】——【合并计算】,【函…

【Spring】Tomcat服务器部署

📝个人主页:五敷有你 🔥系列专栏:Spring⛺️稳中求进,晒太阳 单体项目部署 本地工作 项目在本地开发完毕之后进行一些必要参数的修改。 比如: 数据库的JDBC的配置文件,还有前端页面的…

STM32学习笔记——定时器

目录 一、定时器功能概述 1、基本定时器(TIM6&TIM7) 工作原理 时序 2、通用计时器(TIM2&TIM3&TIM4&TIM5) 时钟源 外部时钟源模式1&2 外部时钟源模式2 外部时钟源模式1 定时器的主模式输出 输入捕获…

打开word时,启动时间很长,教你一招快速启动!

在打开word时,是不是发现word突然启动的非常慢,要在加载界面加载很长时间才能进去,但感觉不是自己电脑的问题,因为其他office软件运行正常。关闭这些设置可以快速启动word。 解决方法 ①在菜单中的“文件”,点击“选项…

ONLYOFFICE 文档开发者版 8.0:API和文档生成器更新

随着 8.0 版新功能的发布,我们更新了编辑器、文档生成器和插件的 API。请阅读本文了解详情。 PDF 支持 我们在 documentType 参数中添加了 pdf 文档这一类型。现在完全支持PDF文件*,包括含有可填写字段的文件,并且可以在ONLYOFFICE PDF 编辑…

Transformer实战-系列教程6:Vision Transformer 源码解读4

🚩🚩🚩Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 Vision Transformer 源码解读1 Vision Transformer 源码解读2 Vision Transformer 源码解读3 Vis…

3.1 Verilog 连续赋值

关键词:assign, 全加器 连续赋值语句是 Verilog 数据流建模的基本语句,用于对 wire 型变量进行赋值。: 格式如下 assign LHS_target RHS_expression ; LHS(left hand side) 指赋值操作…

猫头虎分享:关闭Windows自动更新的6种方法 ‍

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

《Git 简易速速上手小册》第4章:Git 与团队合作(2024 最新版)

文章目录 4.1 协作流程简介4.1.1 基础知识讲解4.1.2 重点案例:为 Python Web 应用添加新功能4.1.3 拓展案例 1:使用 CI/CD 流程自动化测试4.1.4 拓展案例 2:处理 Pull Request 中的反馈 4.2 使用 Pull Requests4.2.1 基础知识讲解4.2.2 重点案…

windowsserver 2016 PostgreSQL9.6.3-2升级解决其安全漏洞问题

PostgreSQL 身份验证绕过漏洞(CVE-2017-7546) PostgreSQL 输入验证错误漏洞(CVE-2019-10211) PostgreSQL adminpack扩展安全漏洞(CVE-2018-1115) PostgreSQL 输入验证错误漏洞(CVE-2021-32027) PostgreSQL SQL注入漏洞(CVE-2019-10208) PostgreSQL 安全漏洞(CVE-2018-1058) …

elk之search API

写在前面 本文看下查询相关内容,这也是我们在实际工作中接触的最多的,所以有必要好好学习下! 1:查询的分类 主要分为如下2类: 1:基于get查询参数的URI search 2:基于post body的request body search&am…

【JS逆向五】逆向模拟某网站的生成的【jsonKey】值 仅供学习

逆向日期:2024.02.07 使用工具:Node.js 加密方法:AES 文章全程已做去敏处理!!! 【需要做的可联系我】 可使用AES进行解密处理(直接解密即可):在线AES加解密工具 1、打开…

05 06 Verilog基础语法与应用讲解

05. 1. 位操作 计数器实验升级&#xff0c;设计8个LED灯以每个0.5s的速率循环闪烁&#xff08;跑马灯&#xff09; 1.1 方法1&#xff1a;使用移位操作符<<来控制led灯的循环亮灭 设计代码 Verilog中&#xff0c;判断操作的时候不加位宽限定是可以的&#xff0c;比如i…