前端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 = 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代码,写出更清晰和可靠的程序。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

FRP内网穿透需要注意的事情

安全性 SSH设置好密钥后,一定要关闭密码登陆。现在暴力破解策略往往是先派小鸡端口扫描看看谁可以密码访问,如果可以,然后定点爆破就开始了。不允许root登陆。FRP使用token验证。FRP服务端要输出配置文件,info等级就能显示访问ip…

mac docker 宿主机和容器间网络打通

动因 是这样,笔者最近满怀欣喜入手Docker,看着各种文章命令都是不断点头称道:“嗯嗯,不错不错”,在接下来终于准备大干一场的时候碰壁了,主要情况是说在Mac中跑了第一把的时候发现碰到,虚拟机和宿主机居然…

C语言笔试题之两数相加(多次反转链表实现)

实例要求: 1、给定两个非空链表(l1和l2)来代表两个非负整数;2、数字最高位位于链表开始位置;3、它们的每个节点只存储一位数字;4、将这两数相加会返回一个新的链表; 案例展示: 实例…

Leetcode刷题笔记题解(C++):面试题 08.07. 无重复字符串的排列组合

思路:因为字符之间互不相同,故使用全排列的方式去解题; 字符串长度为n,将第一个字母分别与后面每一个字母进行交换,生成n种不同的全排列;再用第二个元素与后面每一个元素进行交换,生成n - 1种不…

K8S之运用亲和性设置Pod的调度约束

亲和性 Node节点亲和性硬亲和实践软亲和性实践 Pod节点亲和性和反亲和性pod亲和性硬亲和实践 pod反亲和性 Pod 的yaml文件里 spec 字段中包含一个 affinity 字段,使用一组亲和性调度规则,指定pod的调度约束。 kubectl explain pods.spec.affinity 配置…

c语言实现io多路复用(select),进程,线程并发服务器

io多路复用&#xff08;select&#xff09;代码 #include<myhead.h> #include <sys/select.h> #define PORT 8888 #define IP "192.168.250.100" int main(int argc, char const *argv[]) { //创建套接字int sfd socket(AF_INET, SOCK_STREAM, 0…

Leetcode—60. 排列序列【困难】

2024每日刷题&#xff08;113&#xff09; Leetcode—60. 排列序列 算法思想 实现代码 class Solution { public:string getPermutation(int n, int k) {vector<int> nums(n);// f[i] i!vector<int> f(n 1, 1); string ans;iota(nums.begin(), nums.end(), 1…

Blazor入门100天 : 自做一个支持长按事件的按钮组件

好长时间没继续写这个系列博客了, 不知道大家还记得我吗? 话不多说,直接开撸. 配套源码 demo https://blazor.app1.es/b19LongPressButton ####1. 新建 net8 blazor 工程 b19LongPressButton 至于用什么模式大家各取所需, 我创建的是ssr单工程, 如果大家不小心建立错了按页…

软考 系统分析师系列知识点之信息系统战略规划方法(4)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之信息系统战略规划方法&#xff08;3&#xff09; 所属章节&#xff1a; 第7章. 企业信息化战略与实施 第4节. 信息系统战略规划方法 7.4.2 关键成功因素法 关键成功因素&#xff08;Critical Success Factors&#xff0c…

Vue3.0(五):Vue-Router 4.x详解

Vue-Router详解 vue-router教程 认识前端路由 路由实际上是网络工程中的一个术语 在架构一个网络的时候&#xff0c;常用到两个很重要的设备—路由器和交换机路由器实际上就是分配ip地址&#xff0c;并且维护着ip地址与电脑mac地址的映射关系通过映射关系&#xff0c;路由器…

放假--寒假自学版 day1(补2.5)

fread 函数&#xff1a; 今日练习 C语言面试题5道~ 1. static 有什么用途&#xff1f;&#xff08;请至少说明两种&#xff09; 1) 限制变量的作用域 2) 设置变量的存储域 2. 引用与指针有什么区别&#xff1f; 1) 引用必须被初始化&#xff0c;指针不必。 2) 引用初始…

数据结构与算法-链表(力扣附链接)

之前我们对C语言进行了一定的学习&#xff0c;有了一些基础之后&#xff0c;我们就可以学习一些比较基础的数据结构算法题了。这部分的知识对于我们编程的深入学习非常有用&#xff0c;对于一些基本的算法&#xff0c;我们学习之后&#xff0c;就可以参加一些编程比赛了&#x…

java基础(2) 面向对象编程-java核心类

面向对象 面向对象对应的就是面向过程&#xff0c; 面向过程就是一步一步去操作&#xff0c;你需要知道每一步的步骤。 面向对象的编程以对象为核心&#xff0c;通过定义类描述实体及其行为&#xff0c;并且支持继承、封装和多态等特性 面向对象基础 面向对象编程&#xff0…

吉他学习:识谱,认识节奏,视唱节奏,节拍器的使用

第九课 识谱https://m.lizhiweike.com/lecture2/29362692 第十课 基础乐理(二)——节奏篇https://mp.csdn.net/mp_blog/creation/editor?spm=1011.2124.3001.6192

CPU和GPU有什么区别,玩游戏哪个更重要?

大家好&#xff01;今天我们要聊的话题是CPU和GPU&#xff0c;它们在电脑中扮演着重要的角色&#xff0c;虽然看起来只是两个简单的缩写&#xff0c;但它们的功能和影响是截然不同的&#xff01; 那么&#xff0c;究竟CPU和GPU有什么区别呢&#xff1f;在玩游戏时&#xff0c;…

OCP使用web console创建和构建应用

文章目录 环境登录创建project赋予查看权限部署第一个image检查pod扩展应用 部署一个Python应用连接数据库创建secret加载数据并显示国家公园地图 清理参考 环境 RHEL 9.3Red Hat OpenShift Local 2.32 登录 在 crc start 启动crc时&#xff0c;可以看到&#xff1a; .....…

寒假作业2024.2.6

1.现有无序序列数组为23,24,12,5,33,5347&#xff0c;请使用以下排序实现编程 函数1:请使用冒泡排序实现升序排序 函数2:请使用简单选择排序实现升序排序 函数3:请使用直接插入排序实现升序排序 函数4:请使用插入排序实现升序排序 #include <stdio.h> #include <stdl…

机器学习11-前馈神经网络识别手写数字1.0

在这个示例中&#xff0c;使用的神经网络是一个简单的全连接前馈神经网络&#xff0c;也称为多层感知器&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;。这个神经网络由几个关键组件构成&#xff1a; 1. 输入层 输入层接收输入数据&#xff0c;这里是一个 28x…

空气质量预测 | Matlab实现基于SVR支持向量机回归的空气质量预测模型

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 政府机构使用空气质量指数 (AQI) 向公众传达当前空气污染程度或预测空气污染程度。 随着 AQI 的上升,公共卫生风险也会增加。 不同国家有自己的空气质量指数,对应不同国家的空气质量标准。 基于支持向量机(Su…

真正免费的文件恢复软件easyrecovery2024中文版

easyrecovery数据恢复软件是一款广受好评的数据恢复工具&#xff0c;它能够有效地帮助用户恢复各种类型的文件。无论是照片、视频、音乐还是文档&#xff0c;都能轻松地找回这些重要文件。操作安全、用户可自主操作的数据恢复方案&#xff0c;它支持从各种各样的存储介质恢复删…