JavaScript执行上下文和调用栈

上节课我们已经说过了,JavaScript的代码执行是发生在js引擎中的调用堆栈的,但是具体是如何运行的,我们来详细剖析一下

如何执行上下文

执行上下文:
执行上下文是指在JavaScript中代码被执行时所创建的环境。它包含了变量、函数、对象和其他代码执行所需的信息。每当函数被调用时,都会创建一个新的执行上下文。
举个例子:
例如要把装披萨的盒子比作执行上下文,披萨比作JavaScript的代码,但是盒子里面可能并不只有披萨,还有餐具和清单!这样才能构建一个吃披萨(执行代码)的环境!

只有一个全局执行上下文(EC)
默认上下文,为不在任何函数内的代码创建(顶级)。
在这里插入图片描述

顶级代码示例

在这里插入图片描述

声明的变量和声明的函数在全局中使用,所以在顶级代码中就被执行,但是函数内的代码,只有在被调用的时候菜会执行!

执行函数的内部

内部执行上下文

  1. 可变函数
    a. let、const和var声明
    b. 函数
    c. 参数对象

  2. 作用域链
    JavaScript的作用域链是一种用于查找变量和函数的机制。当在代码中引用一个变量时,JavaScript引擎会按照一定的顺序搜索变量的定义。这个搜索过程就是通过作用域链来完成的。
    在JavaScript中,每个函数都有自己的执行上下文,包括一个变量对象(Variable Object),它存储了函数内部定义的变量和函数。当函数被调用时,会创建一个新的执行上下文,并将其添加到作用域链的前端。
    作用域链是一个由多个执行上下文对象组成的链表,它按照函数定义的嵌套关系进行链接。每个执行上下文对象都有一个指向其父级执行上下文对象的引用,这样就形成了一个作用域链。
    当查找一个变量时,JavaScript引擎首先在当前执行上下文的变量对象中查找,如果找到了变量,则使用该变量。如果没有找到,则沿着作用域链向上一级执行上下文的变量对象中查找,直到找到该变量或者到达作用域链的顶端(全局作用域)。
    如果在整个作用域链上都没有找到该变量,则会抛出一个引用错误。
    这种作用域链的机制允许内部函数访问外部函数的变量,即使外部函数已经执行完毕,也仍然可以通过作用域链找到这些变量。这被称为"闭包",是JavaScript中非常强大和有用的特性之一。

  3. this关键字
    "this"关键字在JavaScript中是一个特殊的关键字,它通常用于引用当前执行代码的上下文对象。
    "this"关键字的值在不同的上下文中有不同的含义。它的值取决于函数的调用方式以及函数所属的对象。
    在全局作用域中,"this"引用的是全局对象(在浏览器中是"window"对象,在Node.js中是"global"对象)。
    在函数中,"this"的值取决于函数是如何被调用的。如果函数是作为对象的方法调用的,那么"this"引用的是该对象。如果函数是作为普通函数调用的,那么"this"引用的是全局对象(在浏览器中是"window"对象,在Node.js中是"global"对象)。
    此外,“this"还可以通过一些特殊的函数调用方式来显式地绑定到指定的对象上,例如使用"call”、"apply"或"bind"方法。
    总之,"this"关键字在JavaScript中用于引用当前执行代码的上下文对象,它的值取决于函数的调用方式以及函数所属的对象。

举例说明

在这里插入图片描述

函数调用栈

“位置”执行上下文被堆叠在一起以跟踪我们在执行中的位置。

在这里插入图片描述

示例

const name = 'Jonas';const first = () => {let a = 1;const b = second(7, 9);a = a + b;return a;
};function second(x, y) {var c = 2;return c;
}const x = first();

首先,让我们逐行解释这段代码的执行过程,以了解函数调用栈的原理是如何应用的:

  1. const name = ‘Jonas’; - 这行代码定义了一个常量name并赋值为字符串’Jonas’。这行代码不涉及函数调用,因此不会影响函数调用栈。在全局代码中就会执行!
  2. const first = () => { … } - 这行代码定义了一个箭头函数first。箭头函数不会立即执行,而是在被调用时才执行。因此,此时不会有函数调用栈的变化。
  3. function second(x, y) { … } - 这行代码定义了一个名为second的函数。函数定义本身不会改变函数调用栈,只有在函数被调用时才会推入调用栈。
  4. const x = first(); - 这行代码调用了函数first并将其返回值赋给常量x。函数调用会改变函数调用栈的状态。
    现在我们来分析函数调用栈的变化:
  5. const x = first(); - 这行代码调用了函数first,将其推入函数调用栈的顶部。
  6. const b = second(7, 9); - 在函数first中,调用了函数second,将其推入函数调用栈的顶部。
  7. return c; - 函数second执行完毕,将其执行结果返回给调用者first。
  8. a = a + b; - 在函数first中,将变量b的值加到变量a上。
  9. return a; - 函数first执行完毕,将其执行结果返回给调用者。
  10. const x = first(); - 函数调用栈中只剩下全局上下文,函数调用栈为空。
    最终,常量x的值为3,因为函数first的执行结果是3。
    这个例子展示了函数调用栈的典型行为:当一个函数被调用时,它的执行上下文被推入调用栈的顶部,函数执行完毕后,它的执行上下文从调用栈中弹出,控制权返回给调用者。这个过程会一直重复,直到所有函数执行完毕,调用栈为空。

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

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

相关文章

pam_radius库的使用

一. 前言 我们知道,linux pam库是一系列的库,用于处理一些应用程序的认证工作,比如login程序。但是默认的pam库只是用于本地认证,也就是认证的用户名和密码存储在本机上。如果需要远程认证,比如向radius服务器认证&…

uni-app学习笔记

目录 一、前期准备 1、项目认识 2、pages.json基本配置 3、创建页面 二、tabBar 1、获取图标 2、代码配置 三、基础认识 1、页面生命周期 2、App.vue应用生命周期 四、基础组件 1、scroll-view可滚动视图区域 2、提示框 3、swiper滑块视图容器 4、form表单组件 一…

【漏洞复现】Apache_HTTP_2.4.49_路径穿越漏洞(CVE-2021-41773)

感谢互联网提供分享知识与智慧,在法治的社会里,请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞验证方式一 curl方式二 bp抓包 说明内容漏洞编号CVE-2021-41773漏洞名称Apache HTTP 路径穿越漏洞漏…

新手入门Python一定要看的八个超实用建议!

文章目录 前言一、项目文件事先做好归档二、永远不要手动修改源数据并且做好备份三、做好路径的正确配置四、代码必要的地方做好备注与说明五、加速你的Python循环代码六、可视化你的循环代码进度七、使用高效的异常捕获工具八、要多考虑代码健壮性关于Python技术储备一、Pytho…

[PyTorch][chapter 61][强化学习-免模型学习1]

前言: 在现实的学习任务中,环境 其中的转移概率P,奖赏函数R 是未知的,或者状态X也是未知的 称为免模型学习(model-free learning) 目录: 1: 蒙特卡洛强化学习 2:同策略-蒙特卡洛强化学习 3&am…

JavaFX作业

前言: 在写这个作业之前,尝试在JavaFX中添加全局快捷键,测试了大概5个小时,到处找教程换版本,结果最后还是没找到支持Java8以上的(也有可能是我自己的问题),最后只能退而求其次&…

手写数字识别--神经网络实验

实验源码自取: 我自己搞的代码,预测精度才94% 神经网络实验报告源码.zip - 蓝奏云 老师给的实验源码答案和资料,预测精度高达99% 深度学习实验报告.zip - 蓝奏云 上深度学习的课程,老师布置了一个经典的实验报告,我做…

libpcap之数据分流

当前系统都是多核系统,为了充分利用多核优势,数据包可以在底层就进行分流,可以通过多线程/多进程对同一个接口的数据进行并行的处理。 一、实验 一个server/client程序一个简单的抓包程序,抓取server/client之间的通信数据 1.1 …

如何利用Python实现分词和NER的Web服务

大家都知道python在数据处理、数据分析和机器学习等方面的强大之处,那么如何使用Python实现Web方式的HTTP应用和服务呢,其实有很多种方式,比如利用gradio、streamlit实现web应用,利用FastApi实现web服务等等,具体详见之…

【蓝桥杯 第十四届省赛Java B组】真题训练(A - C)正在更新

目录 A、阶乘求和 - BigInteger B、幸运数字 - 字符串 进制转换 暴力大法 C、数组分割 - A、阶乘求和 - BigInteger 思路: 当时比赛时,拿计算器算的,然后辛辛苦苦也没对 看到这个数肯定很大,而且只求后9位,阶乘越…

【计算机网络】应用层

应用层协议原理 客户-服务器体系结构: 特点:客户之间不能直接通信;服务器具有周知的,固定的地址,该地址称为IP地址。 配备大量主机的数据中心常被用于创建强大的虚拟服务器;P2P体系结构: 特点&…

K8S知识点(二)

(1)K8S概念 K8S是通过控制pod来控制容器进而控制程序的 service是沟通Pod和外键的桥梁,可以实现负载均衡的效果,加权负载的效果 (2)环境搭建-环境规划 (3)环境搭建-主机安装 使用…

求先序排列

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 给出一棵二叉树的中序与后序排列。求出它的先序排列。(约定树结点用不同的大写字母表示,长度 ≤ 8)。 输入描述: 2行,均为大写字母组…

MTR (Mini-Transaction)

MTR,即Mini-Transaction,是InnoDB存储引擎中的一种管理并发事务的机制。它用于确保在并发环境下,数据库操作的一致性、隔离性和持久性。MTR被设计用来管理数据库内部的操作,以确保多个事务在并发执行时,对数据的修改不…

时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解 目录 时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 PSO-VMD粒子群算法PSO优化VMD变分模态分解 可直接运行 分解效果…

2023-11-04 LeetCode每日一题(数组中两个数的最大异或值)

2023-11-04每日一题 一、题目编号 421. 数组中两个数的最大异或值二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 nums &#xff0c;返回 nums[i] XOR nums[j] 的最大运算结果&#xff0c;其中 0 ≤ i ≤ j < n 。 示例 1&#xff1a; 示例 2&…

[动态规划] (六) 路径问题 LeetCode 63.不同路径II

[动态规划] (六) 路径问题: LeetCode 63.不同路径II 文章目录 [动态规划] (六) 路径问题: LeetCode 63.不同路径II题目解析解题思路状态表示状态转移方程初始化和填表返回值 代码实现总结 63. 不同路径 II 题目解析 (1) 机器人从左上角移动到右下角 (2) 机器人只能向右或者向…

Android STR研究之四

前言&#xff1a; 在前三篇中初步介绍了开机流程和STR流程&#xff0c;这里讲唤醒 Android STR研究之一-CSDN博客 Android STR研究之二-CSDN博客 Android STR研究之三-CSDN博客 唤醒 如上文所述&#xff0c;当唤醒的时候代码会继续往下执行 private void doHandleDeepSleep(bo…

【漏洞复现】Nginx_0.7.65_空字节漏洞

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 1.1、漏洞描述 1.2、漏洞等级 1.3、影响版本 0.7.65 1.4、漏洞复现 1、基础环…