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

JavaScript 预编译与执行机制解析

在深入探讨JavaScript预编译与执行机制之前,我们首先需要明确几个基本概念:声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分,对于理解代码的执行流程至关重要。本文将围绕这些核心概念,展开一次深度解析之旅,全面而深入地阐述这一主题。

image.png

一、声明提升(Hoisting)

声明提升是JavaScript中一个独特的特性,它涉及到变量声明和函数声明在代码执行前被提前处理的过程。这一特性有时会引发一些令人困惑的行为,尤其是对初学者而言,但深入理解其机制是掌握JavaScript语言的关键之一。

1. 变量声明提升

当JavaScript引擎开始执行一段脚本或函数时,它首先会进行编译阶段,在这个阶段,所有使用var声明的变量会被提升至当前作用域的顶部。这意味着尽管你在代码中可能将变量声明放在了函数体的下半部分,实际上该变量在整个函数作用域内都是可用的,尽管其初始值为undefined

console.log(a); // undefined var a = 5

在上述代码中,尽管变量a的赋值操作发生在console.log之后,但由于声明提升,a在输出时已经被声明了,只是其值为undefined

image.png

结果与下述代码一致

var a console.log(a); // undefined var a = 5

image.png

2. 函数声明提升

与变量声明类似,使用函数声明语法定义的函数也会被提升至所在作用域的顶部。这意味着你可以在函数声明之前调用函数,而不会遇到引用错误。

 

javascript

foo(); // 输出 "Hello, World!" function foo() { console.log("Hello, World!"); }

image.png

二、函数执行上下文与全局执行上下文

在JavaScript中,每当一个函数被调用时,都会创建一个新的执行上下文(Execution Context)。执行上下文负责存储函数执行过程中的变量、函数参数以及作用域链等信息,它是JavaScript执行环境的具体体现。

1. 函数执行上下文(AO)

当一个函数被调用时,会执行以下步骤来创建其执行上下文(通常称为活动对象AO, Activation Object):

  • 创建AO:为函数创建一个新的执行上下文对象AO。
  • 参数和变量声明:找形参和变量声明,将形参和变量名作为AO的属性,值为underfined初始值设为undefined
  • 实参与形参绑定:将实参和形参统一。
  • 函数声明:在函数体内找函数声明,将函数名作为AO的属性名,值赋予函数体。

例子

function fn(a){

console.log(a);

//function a(){}

var a = 123 console.log(a);

// a:123 function a(){}

//函数声明 console.log(a);

var b =function (){}

//函数表达式 console.log(b);

//function b(){}

function d(){}

var d=a

// d:123

console.log(d); //123 } fn(1)

执行上下文AO:

image.png

代码实际输出结果:

image.png

2. 全局执行上下文(GO)

全局执行上下文是在程序启动时创建的第一个执行上下文,它代表了整个JavaScript程序的执行环境。其创建过程包括:

  • 创建GO:创建全局执行上下文对象 GO。
  • 变量声明:在全局找变量声明,变量名作为GO的属性名,初始值为undefined
  • 函数声明:在全局找函数声明,函数名作为GO的属性名,值为函数体。

例子

var global = 100 function fn(){

console.log(global);

}

fn()

执行上下文GO:

image.png

代码实际输出结果:

image.png

3. 全局执行上下文(GO)和 函数执行上下文(AO)

当程序运行时,先进行全局变量的预编译,在函数调用的前一刻进行函数声明,进入函数预编译。

例子:

javascript

global = 100 function fn(){

console.log(global);

//undefined global = 200

console.log(global); //200 global=300 }

fn();

console.log(global); var global;

全局执行上下文GO和函数执行上下文AO:

image.png

代码实际输出结果:

image.png

三、调用栈(Call Stack)

调用栈是JavaScript引擎用于追踪函数调用顺序的一种数据结构,它记录了每一次函数调用的状态,包括函数的返回地址和局部变量等信息。每当一个函数被调用时,其执行上下文会被推入调用栈;当函数执行完毕,其上下文则从栈顶弹出,控制权返回到调用它的函数或全局作用域。

调用栈的工作机制确保了函数的执行顺序遵循“先进后出”原则,同时也限制了JavaScript的并发能力,因为任何时刻只能有一个执行上下文处于活动状态,这解释了为什么JavaScript被称为单线程语言。

相关文章:

JavaScript 预编译与执行机制解析

在深入探讨JavaScript预编译与执行机制之前,我们首先需要明确几个基本概念:声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分,对于理解代码的执行流程至关重要。本文将围绕这些核…...

多路h265监控录放开发-(12)完成全部开始录制和全部停止录制代码

xviewer.h 新增 public: void StartRecord();//126 开始全部摄像头录制 void StopRecord();//126 停止全部摄像头录制 xviewer.cpp 新增 //视频录制 static vector<XCameraRecord*> records;//126void XViewer::StartRecord() //开始全部摄像头录制 126 {StopRecord…...

Redis源码学习:Redis对象和5种数据类型的工作原理

Redis 提供 5 种基本数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;哈希&#xff09;、Zset&#xff08;有序集合&#xff09;&#xff0c;这些数据类型可以供用户直接使用…...

从理论到实践掌握UML

统一建模语言&#xff08;UML&#xff09;是软件工程师用来设计软件系统的一种工具&#xff0c;就像是一套图形化的说明书。它让开发团队能够以图形化的方式来理解、设计和开发软件系统&#xff0c;比起用文字来描述&#xff0c;更加直观易懂。本文通过UML实例化的理论和实践相…...

LabVIEW Windows与RT系统的比较与选择

LabVIEW是一种系统设计和开发环境&#xff0c;广泛应用于各类工程和科学应用中。LabVIEW Windows和LabVIEW RT&#xff08;Real-Time&#xff09;是LabVIEW的两个主要版本&#xff0c;分别适用于不同的应用场景。以下从多个角度详细分析两者的区别&#xff0c;并提供选择建议。…...

docker搭建mongo副本集

1、mongo集群分类 MongoDB集群有4种类型&#xff0c;分别是主从复制、副本集、分片集群和混合集群。 MongoDB的主从复制是指在一个MongoDB集群中&#xff0c;一个节点&#xff08;主节点&#xff09;将数据写入并同步到其他节点&#xff08;从节点&#xff09;。主从复制提供…...

关于Pytorch转换为MindSpore的一点建议

一、事先准备 必须要对Mindspore有一些了解&#xff0c;因为这个框架确实有些和其它流程不一样的地方&#xff0c;比如算子计算、训练过程中的自动微分&#xff0c;所以这两个课程要好好过一遍&#xff0c;官网介绍文档最好也要过一遍 1、零基础Mindspore&#xff1a;https://…...

JetBrains IDEA 新旧UI切换

JetBrains IDE 新旧UI切换 IntelliJ IDEA 的老 UI 以其经典的布局和稳定的性能&#xff0c;成为了许多开发者的首选。而新 UI 则在此基础上进行了全面的改进&#xff0c;带来了更加现代化、响应式和高效的用户体验。无论是新用户还是老用户&#xff0c;都可以通过了解和适应这…...

iOS KeychainAccess的了解与使用

KeychainAccess 是一个用于 iOS、macOS、tvOS 和 watchOS 上的 Swift 密钥链访问库。它提供了一个简单且安全的 API,用于在设备的密钥链中存储和检索数据。 KeychainAccess 的一些主要特点包括: 简单易用的 API&#xff1a;该库提供了一个直观的 API,可以轻松地将数据存储和检…...

STM32 Customer BootLoader 刷新项目 (二) 方案介绍

STM32 Customer BootLoader 刷新项目 (二) 方案介绍 文章目录 STM32 Customer BootLoader 刷新项目 (二) 方案介绍1. 需求分析2. STM32 Memery介绍3. BootLoader方案介绍4. 支持指令 1. 需求分析 首先在开始编程之前&#xff0c;我们先详细设计一下BootLoder的方案。 本项目做…...

2-14 基于matlab的GA优化算法优化车间调度问题

基于matlab的GA优化算法优化车间调度问题。n个工作在m个台机器上加工。已知每个工作中工序加工顺序、各工序的加工时间以及每个工件所包含的工序&#xff0c;在满足约束条件的前提下&#xff0c;目的是确定机器上各工件顺序&#xff0c;以保证某项性能指标最优。程序功能说明&a…...

Program-of-Thoughts(PoT):结合Python工具和CoT提升大语言模型数学推理能力

Program of Thoughts Prompting:Disentangling Computation from Reasoning for Numerical Reasoning Tasks github&#xff1a;https://github.com/wenhuchen/Program-of-Thoughts 一、动机 数学运算和金融方面都涉及算术推理。先前方法采用监督训练的形式&#xff0c;但这…...

ansible setup模块

用于收集有关目标主机的系统和网络信息&#xff0c;并将这些信息存储为一个facts变量&#xff0c;可以在Playbook的后续任务中使用。setup模块可以用来获取主机的操作系统、软件包、IP地址、内存、磁盘和其他硬件信息。这些信息对编写Playbook和进行条件判断非常有用。当你在Pl…...

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的测试用例执行计划(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 https://app5938.acapp.acwing.com.cn/contest/2/problem/OD…...

NSIS 入门教程 (一)

介绍 大多数应用程序都附带一个安装程序&#xff0c;它将所需的文件复制到正确的文件夹中&#xff0c;创建注册表项&#xff0c;并提供卸载例程以&#xff08;希望&#xff09;从计算机中彻底删除应用程序. 有多种解决方案可以为自主开发的应用程序配备安装程序。除了Install …...

cve-2015-3306-proftpd-vulfocus

1.原理 proftp是用于搭建基于ftp协议的应用软件 ProFTPD是ProFTPD团队的一套开源的FTP服务器软件。该软件具有可配置性强、安全、稳定等特点。 ProFTPD 1.3.5中的mod_copy模块允许远程攻击者通过站点cpfr和site cpto命令读取和写入任意文件。任何未经身份验证的客户端都可以…...

超详细!想进华为od的请疯狂看我!

三分钟带你全面了解华为OD 【合同及管理】签约方为科锐国际/外企德科&#xff08;人力服务公司&#xff09;&#xff0c;劳动合同期为4年&#xff0c;试用期6个月。员工关系合同管理、五险一金、考勤发薪由科锐国际/外企德科负责&#xff1b;定级定薪、员工培训、工作安排、绩…...

MQTT协议与TCP/IP协议在性能上的区别

MQTT协议与TCP/IP协议在性能上的区别主要体现在以下几个方面&#xff1a; 1.协议开销与传输效率&#xff1a; ① MQTT&#xff1a;MQTT协议针对消息传递进行了优化&#xff0c;使用了小型的控制包和变长的包头设计&#xff0c;极大程度地减少了数据传输过程中的冗余和带宽消耗…...

LeetCode 每日一题 2024/6/17-2024/6/23

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 6/17 522. 最长特殊序列 II6/18 2288. 价格减免6/19 2713. 矩阵中严格递增的单元格数6/20 2748. 美丽下标对的数目6/21 LCP 61. 气温变化趋势6/22 2663. 字典序最小的美丽字…...

FlinkCDC pipeline模式 mysql-to-paimon.yaml

flinkcdc 需要引入&#xff1a; source端&#xff1a; flink-cdc-pipeline-connector-mysql-xxx.jar、mysql-connector-java-xxx.jar、 sink端&#xff1a; flink-cdc-pipeline-connector-paimon-xxx.jar flinkcdc官方提供connect包下载地址&#xff0c;pipeline模式提交作业和…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...