【前端】JavaScript高级教程：函数高级——执行上下文与执行上下文栈
文章目录
- 遍历提升与函数提升
- 执行上下文
- 执行上下文栈(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&…...
【阻抗管传递函数法】频域声压，即复声压是指什么
在阻抗管传递函数法中提到的“频域声压数据”，是通过对传声器测得的“时域声压信号”进行快速傅里叶变换（FFT）后得到的结果。 具体来说，这些频域声压数据指的是传声器测量的声压随时间变化的数据，经过傅里叶变换后&am…...
Python青少年简明教程：类和对象入门
Python青少年简明教程：类和对象入门 Python支持多种编程范式（programming paradigms），即支持多种不同的编程风格和方法。初学者开始重点学习关注的编程范式，一般而言是面向过程编程和面向对象编程。面向过程编程&#…...
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用
效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为…...
OpenAI发布全新o1 AI模型具备推理能力
🦉 AI新闻 🚀 OpenAI发布全新o1 AI模型具备推理能力 摘要：OpenAI推出新AI模型o1，具备推理能力，旨在比人类更快地解决复杂问题。o1与o1-mini版本同时发布，前者训练成本较高，但在编程和多步骤问…...
如何在本地部署大语言模型
近年来，随着大语言模型（如GPT、BERT等）的迅速发展，越来越多的开发者和研究人员希望在本地环境中部署这些强大的模型，以便用于特定的应用场景或进行个性化的研究。本文将详细介绍如何在本地部署大语言模型，涵…...
秒懂：环境变量
前言 1.Linux当中70%以上的命令程序都是用C语言写的 2.执行命令程序和运行自己写的程序没有任何区别 3.自己程序运行必须要带路径（绝对/相对都可） 4. 系统指令可带可不带（带不要瞎带） 变量具有全局特性是…...
使用 @Param 注解标注映射关系
目录 1. 场景描述 2. SQL语句 3. 方法定义 4. Param注解的使用 5. 总结 在开发过程中，我们经常需要在Java应用程序中执行数据库操作，尤其是更新操作。在Spring Data JPA框架中，我们可以使用原生SQL语句来执行这些操作，并通过…...
Java学习中在打印对象时忘记调用 .toString() 方法或者没有重写 toString() 方法怎么办？
在 Java 编程中，toString() 方法对于调试、日志记录以及打印对象信息至关重要。然而，许多初学者在打印对象时可能会忘记调用 .toString() 方法，或者在自定义类中没有重写 toString() 方法，这可能导致输出结果不符合预期。 一、Ja…...
如何评估一个RAG（检索增强生成）系统-上篇
最近项目中需要评估业务部门搭建的RAG助手的效果好坏，看了一下目前业界一些评测的方法。目前分为两大类，基于传统的规则、机器学习的评测方法，基于大模型的评测方法。在这里做一些记录，上篇主要做评测方法的记录，下篇会…...
rust解说
Rust 是一种开源的系统编程语言，由 Mozilla 研究院开发，旨在提供高性能、内存安全且并发性良好的编程体验。 Rust 于 2010 年由 Graydon Hoare 开始设计，并在 2015 年发布了第一个稳定版本。 Rust 的设计目标是解决 C 等传统系统编程语言在…...
Elasticsearch 开放 inference API 为 Hugging Face 添加了原生分块支持
作者：来自 Elastic Max Hniebergall 借助 Elasticsearch 开放推理 API，你可以使用 Hugging Face 的推理端点（Inference Endpoints）在 Elasticsearch 之外执行推理。这样你就可以使用 Hugging Face 的可扩展基础架构，包…...
Jenkins部署若依项目
一、配置环境 机器 jenkins机器 用途：自动化部署前端后端，前后端自动化构建需要配置发送SSH的秘钥和公钥，同时jenkins要有nodejs工具来进行前端打包，maven工具进行后端的打包。 gitlab机器 用途：远程代码仓库拉取和…...
ELK笔记
要搞成这样就需要钱来买服务器 开发人员一般不会给服务器权限，不能到服务器上直接看日志，所以通过ELK看日志。不让开发登录服务器。即使你查出来是开发的问题，费时间，而且影响了业务了，就是运维的问题 开发也不能登录…...
计算机网络 --- 计算机网络的分类
一、计算机网络分类 1.1 按分布范围分类 举例：广域网（WAN）、局域网（LAN） 举例：个域网（PAN） 1.2 按传输技术分类 广播式网络――当一台计算机发送数据分组时，广播范围…...
三维动画|创意无限，让品牌传播更精彩！
随着三维动画技术的不断成熟，三维动画宣传片能够很好地宣传品牌、推广产品，因而慢慢地受到不少企业的青睐，成为品牌最常用的一种宣传方式。 三维动画宣传片作为艺术感极高的宣传视频有强烈的节奏感，而且具有风趣、易懂等特点&…...
欧零导航系统正式版，功能强大，可直接运营
欧零导航系统正式版，带广告位/导航分类/可直接运营 本系统采用PHPMySQL技术开发 拥有独立的安装和后台系统 后台采用BootstripMDUI框架 前台使用响应式界面，自适应各种屏幕 代码免费下载：百度网盘...
了解变压器耦合电压开关 D类放大器
在本文中，我们将讨论另一种 D 类配置：变压器耦合电压切换 (TCVS) 放大器。TCVS 放大器的原理图如图 1 所示。 变压器耦合电压开关 D 类放大器的示意图。 图 1.变压器耦合电压开关 D 类放大器。 在本文中，我们将探索该放大器的工作原理&…...
openssh移植:精致的脚本版
前置文章： busybox移植：全能脚本版-CSDN博客 zlib交叉编译-CSDN博客 openssl移植:精致的脚本版-CSDN博客 源码下载 官网：http://www.openssh.com/ 下载了一个很新的版本 ftp://mirrors.sonic.net/pub/OpenBSD/OpenSSH/portable/openss…...
3C电子胶黏剂在手机制造方面有哪些关键的应用
3C电子胶黏剂在手机制造方面有哪些关键的应用 3C电子胶黏剂在手机制造中扮演着至关重要的角色，其应用广泛且细致，覆盖了手机内部组件的多个层面，确保了设备的可靠性和性能。以下是电子胶在手机制造中的关键应用： 手机主板用胶&…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...