当前位置： 首页 > news >正文

【前端】JavaScript高级教程：函数高级——执行上下文与执行上下文栈

news 2026/2/9 21:09:31

文章目录

  • 遍历提升与函数提升
  • 执行上下文
  • 执行上下文栈(1)
  • 执行上下文栈(2)
  • 面试题

遍历提升与函数提升

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_变量提升与函数提升</title>
</head>
<body>
<!--
1. 变量声明提升* 通过var定义(声明)的变量, 在定义语句之前就可以访问到* 值: undefined
2. 函数声明提升* 通过function声明的函数, 在之前就可以直接调用* 值: 函数定义(对象)
3. 问题: 变量提升和函数提升是如何产生的?
-->
<script type="text/javascript">console.log('-----')/*面试题 : 输出 undefined*/var a = 3function fn () {console.log(a)var a = 4}fn()console.log(b) //undefined  变量提升fn2() //可调用  函数提升// fn3() //不能  变量提升var b = 3function fn2() {console.log('fn2()')}var fn3 = function () {console.log('fn3()')}
</script>
</body>
</html>

执行上下文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_执行上下文</title>
</head>
<body>
<!--
1. 代码分类(位置)* 全局代码* 函数(局部)代码
2. 全局执行上下文* 在执行全局代码前将window确定为全局执行上下文* 对全局数据进行预处理* var定义的全局变量==>undefined, 添加为window的属性* function声明的全局函数==>赋值(fun), 添加为window的方法* this==>赋值(window)* 开始执行全局代码
3. 函数执行上下文* 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)* 对局部数据进行预处理* 形参变量==>赋值(实参)==>添加为执行上下文的属性* arguments==>赋值(实参列表), 添加为执行上下文的属性* var定义的局部变量==>undefined, 添加为执行上下文的属性* function声明的函数 ==>赋值(fun), 添加为执行上下文的方法* this==>赋值(调用函数的对象)* 开始执行函数体代码
-->
<script type="text/javascript">console.log(a1, window.a1)window.a2()console.log(this)var a1 = 3function a2() {console.log('a2()')}console.log(a1)</script>
</body>
</html>

执行上下文栈(1)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03_执行上下文栈</title>
</head>
<body>
<!--
1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
-->
<script type="text/javascript">var a = 10var bar = function (x) {var b = 5foo(x + b)}var foo = function (y) {var c = 5console.log(a + c + y)}bar(10)// bar(10)
</script></body>
</html>

执行上下文栈(2)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04_执行上下文栈2</title>
</head>
<body>
<!--
1. 依次输出什么?gb: undefinedfb: 1fb: 2fb: 3fe: 3fe: 2fe: 1ge: 1
2. 整个过程中产生了几个执行上下文?  5
-->
<script type="text/javascript">console.log('gb: '+ i)var i = 1foo(1)function foo(i) {if (i == 4) {return}console.log('fb:' + i)foo(i + 1) //递归调用: 在函数内部调用自己console.log('fe:' + i)}console.log('ge: ' + i)
</script>
</body>
</html>

面试题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05_面试题</title><link rel="stylesheet" href="xxx.css"><style></style>
</head>
<body>
<div style=""></div>
<script type="text/javascript">/*测试题1:  先执行变量提升, 再执行函数提升，函数提升优先级高于变量提升*/function a() {}var aconsole.log(typeof a) // 'function'/*测试题2:*/if (!(b in window)) { // b是window的属性 !true = false，if语句不执行var b = 1 // 在if判断体中的变量也能提升}console.log(b) // undefined/*测试题3:*/var c = 1function c(c) {console.log(c)var c = 3}c(2) // 报错
//相当于：var cfunction c(c) {console.log(c)var c = 3}c = 1c(2) // 此时c不是函数
</script>
</body>
</html>

相关文章：

【前端】JavaScript高级教程：函数高级——执行上下文与执行上下文栈

文章目录 遍历提升与函数提升执行上下文执行上下文栈(1)执行上下文栈(2)面试题 遍历提升与函数提升 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>01_变量提升与函数提升</title> </head&…...

编程日记 2024/9/13 11:27:44

【阻抗管传递函数法】频域声压，即复声压是指什么

在阻抗管传递函数法中提到的“频域声压数据”&#xff0c;是通过对传声器测得的“时域声压信号”进行快速傅里叶变换&#xff08;FFT&#xff09;后得到的结果。 具体来说&#xff0c;这些频域声压数据指的是传声器测量的声压随时间变化的数据&#xff0c;经过傅里叶变换后&am…...

编程日记 2024/9/13 11:25:41

Python青少年简明教程：类和对象入门

Python青少年简明教程&#xff1a;类和对象入门 Python支持多种编程范式&#xff08;programming paradigms&#xff09;&#xff0c;即支持多种不同的编程风格和方法。初学者开始重点学习关注的编程范式&#xff0c;一般而言是面向过程编程和面向对象编程。面向过程编程&#…...

编程日记 2024/9/13 11:24:40

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用

效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为…...

编程日记 2024/9/13 11:20:32

OpenAI发布全新o1 AI模型具备推理能力

&#x1f989; AI新闻 &#x1f680; OpenAI发布全新o1 AI模型具备推理能力 摘要&#xff1a;OpenAI推出新AI模型o1&#xff0c;具备推理能力&#xff0c;旨在比人类更快地解决复杂问题。o1与o1-mini版本同时发布&#xff0c;前者训练成本较高&#xff0c;但在编程和多步骤问…...

编程日记 2024/9/13 11:19:31

如何在本地部署大语言模型

近年来&#xff0c;随着大语言模型&#xff08;如GPT、BERT等&#xff09;的迅速发展&#xff0c;越来越多的开发者和研究人员希望在本地环境中部署这些强大的模型&#xff0c;以便用于特定的应用场景或进行个性化的研究。本文将详细介绍如何在本地部署大语言模型&#xff0c;涵…...

编程日记 2024/9/13 11:18:29

秒懂：环境变量

前言 1.Linux当中70%以上的命令程序都是用C语言写的 2.执行命令程序和运行自己写的程序没有任何区别 3.自己程序运行必须要带路径&#xff08;绝对/相对都可&#xff09; 4. 系统指令可带可不带&#xff08;带不要瞎带&#xff09; 变量具有全局特性是…...

编程日记 2024/9/13 11:17:28

使用 @Param 注解标注映射关系

目录 1. 场景描述 2. SQL语句 3. 方法定义 4. Param注解的使用 5. 总结 在开发过程中&#xff0c;我们经常需要在Java应用程序中执行数据库操作&#xff0c;尤其是更新操作。在Spring Data JPA框架中&#xff0c;我们可以使用原生SQL语句来执行这些操作&#xff0c;并通过…...

编程日记 2024/9/13 11:14:23

Java学习中在打印对象时忘记调用 .toString() 方法或者没有重写 toString() 方法怎么办？

在 Java 编程中&#xff0c;toString() 方法对于调试、日志记录以及打印对象信息至关重要。然而&#xff0c;许多初学者在打印对象时可能会忘记调用 .toString() 方法&#xff0c;或者在自定义类中没有重写 toString() 方法&#xff0c;这可能导致输出结果不符合预期。 一、Ja…...

编程日记 2024/9/13 11:12:11

如何评估一个RAG（检索增强生成）系统-上篇

最近项目中需要评估业务部门搭建的RAG助手的效果好坏&#xff0c;看了一下目前业界一些评测的方法。目前分为两大类&#xff0c;基于传统的规则、机器学习的评测方法&#xff0c;基于大模型的评测方法。在这里做一些记录&#xff0c;上篇主要做评测方法的记录&#xff0c;下篇会…...

编程日记 2024/9/13 11:11:09

rust解说

Rust 是一种开源的系统编程语言&#xff0c;由 Mozilla 研究院开发&#xff0c;旨在提供高性能、内存安全且并发性良好的编程体验。 Rust 于 2010 年由 Graydon Hoare 开始设计&#xff0c;并在 2015 年发布了第一个稳定版本。 Rust 的设计目标是解决 C 等传统系统编程语言在…...

编程日记 2024/9/13 11:08:56

Elasticsearch 开放 inference API 为 Hugging Face 添加了原生分块支持

作者&#xff1a;来自 Elastic Max Hniebergall 借助 Elasticsearch 开放推理 API&#xff0c;你可以使用 Hugging Face 的推理端点&#xff08;Inference Endpoints&#xff09;在 Elasticsearch 之外执行推理。这样你就可以使用 Hugging Face 的可扩展基础架构&#xff0c;包…...

编程日记 2024/9/13 11:07:52

Jenkins部署若依项目

一、配置环境 机器 jenkins机器 用途&#xff1a;自动化部署前端后端&#xff0c;前后端自动化构建需要配置发送SSH的秘钥和公钥&#xff0c;同时jenkins要有nodejs工具来进行前端打包&#xff0c;maven工具进行后端的打包。 gitlab机器 用途&#xff1a;远程代码仓库拉取和…...

编程日记 2024/9/13 11:06:47

ELK笔记

要搞成这样就需要钱来买服务器 开发人员一般不会给服务器权限&#xff0c;不能到服务器上直接看日志&#xff0c;所以通过ELK看日志。不让开发登录服务器。即使你查出来是开发的问题&#xff0c;费时间&#xff0c;而且影响了业务了&#xff0c;就是运维的问题 开发也不能登录…...

编程日记 2024/9/13 11:05:46

计算机网络 --- 计算机网络的分类

一、计算机网络分类 1.1 按分布范围分类 举例&#xff1a;广域网&#xff08;WAN&#xff09;、局域网&#xff08;LAN&#xff09; 举例&#xff1a;个域网&#xff08;PAN&#xff09; 1.2 按传输技术分类 广播式网络――当一台计算机发送数据分组时&#xff0c;广播范围…...

编程日记 2024/9/13 11:04:41

三维动画|创意无限，让品牌传播更精彩！

随着三维动画技术的不断成熟&#xff0c;三维动画宣传片能够很好地宣传品牌、推广产品&#xff0c;因而慢慢地受到不少企业的青睐&#xff0c;成为品牌最常用的一种宣传方式。 三维动画宣传片作为艺术感极高的宣传视频有强烈的节奏感&#xff0c;而且具有风趣、易懂等特点&…...

编程日记 2024/9/13 11:03:38

欧零导航系统正式版，功能强大，可直接运营

欧零导航系统正式版&#xff0c;带广告位/导航分类/可直接运营 本系统采用PHPMySQL技术开发 拥有独立的安装和后台系统 后台采用BootstripMDUI框架 前台使用响应式界面&#xff0c;自适应各种屏幕 代码免费下载&#xff1a;百度网盘...

编程日记 2024/9/13 11:00:28

了解变压器耦合电压开关 D类放大器

在本文中&#xff0c;我们将讨论另一种 D 类配置&#xff1a;变压器耦合电压切换 (TCVS) 放大器。TCVS 放大器的原理图如图 1 所示。 变压器耦合电压开关 D 类放大器的示意图。 图 1.变压器耦合电压开关 D 类放大器。 在本文中&#xff0c;我们将探索该放大器的工作原理&…...

编程日记 2024/9/13 10:57:03

openssh移植:精致的脚本版

前置文章&#xff1a; busybox移植&#xff1a;全能脚本版-CSDN博客 zlib交叉编译-CSDN博客 openssl移植:精致的脚本版-CSDN博客 源码下载 官网&#xff1a;http://www.openssh.com/ 下载了一个很新的版本 ftp://mirrors.sonic.net/pub/OpenBSD/OpenSSH/portable/openss…...

编程日记 2024/9/13 10:56:02

3C电子胶黏剂在手机制造方面有哪些关键的应用

3C电子胶黏剂在手机制造方面有哪些关键的应用 3C电子胶黏剂在手机制造中扮演着至关重要的角色&#xff0c;其应用广泛且细致&#xff0c;覆盖了手机内部组件的多个层面&#xff0c;确保了设备的可靠性和性能。以下是电子胶在手机制造中的关键应用&#xff1a; 手机主板用胶&…...

编程日记 2024/9/13 10:55:00

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2026/2/7 17:43:28

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2026/1/20 12:20:43