前端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://www.hqwc.cn/news/460750.html

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

相关文章

飞书上传图片

飞书上传图片 1. 概述1.1 访问凭证2. 上传图片获取image_key1. 概述 飞书开发文档上传图片: https://open.feishu.cn/document/server-docs/im-v1/image/create 上传图片接口,支持上传 JPEG、PNG、WEBP、GIF、TIFF、BMP、ICO格式图片。 在请求头上需要获取token(访问凭证) …

停车场|基于Springboot的停车场管理系统设计与实现(源码+数据库+文档)

停车场管理系统目录 目录 基于Springboot的停车场管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 (1)车位管理 (2)车位预订管理 (3)公告管理 (4&#…

卷积层Conv1d包含的元素分别是什么,经过卷积层,数据的形状发生变化吗?

nn.Conv1d 是一个一维卷积层,它通常用于处理序列数据,如时间序列或文本数据。这个层包含以下主要元素: 输入通道数(In_channels):这是输入数据的通道数。对于单通道数据(如灰度图像或单变量时间…

第一个 Angular 项目 - 静态页面

第一个 Angular 项目 - 静态页面 之前的笔记: [Angular 基础] - Angular 渲染过程 & 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 这是在学完了上面这三个内容后能够完成的项目,目前因为还没有学到数…

从0开始学Docker ---Docker安装教程

Docker安装教程 本安装教程参考Docker官方文档,地址如下: https://docs.docker.com/engine/install/centos/ 1.卸载旧版 首先如果系统中已经存在旧的Docker,则先卸载: yum remove docker \docker-client \docker-client-latest…

Modern C++ 内存篇1 - allocator

1. 前言 从今天起我们开始内存相关的话题,内存是个很大的话题,一时不知从何说起。内存离不开allocator,我们就从allocator开始吧。allocator目前有两种:std::allocator, std::pmr::polymorphic_allocator,各有优缺点。…

Python:流程控制

4.1 顺序结构 在任何编程语言中最常见的程序结构就是顺序结构。顺序结构就是程序从上到下一行行地执行,中间没有任何判断和跳转。 如果Python程序的多行代码之间没有任何流程控制,则程序总是从上往下依次执行,排在前面的代码先执行&#xf…

猫头虎分享已解决Bug || Python Error: NameError: name ‘variable_name‘ is not defined

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

智能边缘计算网关实现高效数据处理与实时响应-天拓四方

在当今时代,数据已经成为驱动业务决策的关键因素。然而,传统的数据处理方式往往存在延迟,无法满足实时性要求。此时,智能边缘计算网关应运而生,它能够将数据处理和分析的能力从中心服务器转移至设备边缘,大…

【华为云】云上两地三中心实践实操

写在前面 应用上云之后,如何进行数据可靠性以及业务连续性的保障是非常关键的,通过华为云云上两地三中心方案了解相关方案认证地址:https://connect.huaweicloud.com/courses/learn/course-v1:HuaweiXCBUCNXI057Self-paced/about当前内容为华…

一条 SQL 查询语句是如何执行的

MySQL 的基本架构示意图 大体来说,MySQL 可以分为 Server 层和存储引擎层两部分 Server 层包括连接器、查询缓存、分析器、优化器、执行器等,涵盖 MySQL 的大多数核心服务功能,以及所有的内置函数(如日期、时间、数学和加密函数等…

VS Code中主程序C文件引用了另一个.h头文件,编译时报错找不到函数

目录 一、问题描述二、问题原因三、解决方法四、扩展五、通过CMake进行配置 一、问题描述 VS Code中主程序C文件引用了另一个.h头文件&#xff0c;编译时报错找不到函数 主程序 main.c #include <stdio.h> #include "sumaa.h"int main(int, char**){printf(&q…