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被称为单线程语言。

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

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

相关文章

SpringBoot配置第三方专业缓存技术jetcache远程缓存方案和本地缓存方案

JetCache 是一个基于 Java 的分布式缓存解决方案,旨在提供高性能和可扩展性。它支持多种后端存储,如 Redis、Hazelcast、Tair 等,可以作为应用程序的缓存层,有效地提升数据访问性能和响应速度。 JetCache 的主要特点包括&#x…

②-Ⅱ单细胞学习-组间及样本细胞比例分析(补充)

数据加载 ①单细胞学习-数据读取、降维和分群_subset函数单细胞群-CSDN博客‘ #2024年6月20日 单细胞组间差异分析升级# rm(list ls()) library(Seurat)#数据加载(在第一步已经处理好的数据) load("scedata1.RData")#这里是经过质控和降维…

MongoDB数据库的安装和删除

MongoDB数据库的删除和安装 1、删除MongoDB数据库2、下载MongoDB数据库1)、自定义安装2)、注意可视化可以取消勾选 1、删除MongoDB数据库 没有下载过的,可以直接跳到下面的安装过程↓ 我们电脑中如果有下载过MongoDB数据库,要更换版本的话,其…

能正常执行但是 cion 标红/没有字段提示

ctrl q 退出 clion 找到工程根目录,删除隐藏文件 .idea 再重新打开 clion 标红消失,同时再次输入函数/类属性,出现字段提示 clion 的智能提示方案存储在 .idea 文件中,如果工程能够正常编译执行,那么说明是智能提示…

基于STM32的智能家居安防系统

目录 引言环境准备智能家居安防系统基础代码实现:实现智能家居安防系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景:智能家居安防管理与优化问题解决方案与优化收尾与总结 1. 引言 智能家居安防系统通过使…

第T2周:彩色图片分类

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 👉 要求: 学习如何编写一个完整的深度学习程序了解分类彩色图片会灰度图片有什么区别测试集accuracy到达72% 🦾我的环境&am…

前端下载文件流,axios设置responseType: arraybuffer/blob无效

项目中调用后端下载文件接口,设置responseType: arraybuffer,实际拿到的数据data是字符串 axios({method: post,url: /api/v1/records/recording-file/play,// 如果有需要发送的数据,可以放在这里data: { uuid: 06e7075d-4ce0-476f-88cb-87fb0a1b4844 }…

使用VisualBox+Vagrant搭建Centos虚拟机环境

1.下载并安装VisualBox; 2.下载并安装Vagrant; 3.打开cmd窗口,执行命令vagrant init centos/7,初始化centos环境,该步骤受网络带宽影响,可能挂级30分钟到1个小时; 4.启动虚拟机:vagrant up&…

基于CDMA的多用户水下无线光通信(2)——系统模型和基于子空间的延时估计

本文首先介绍了基于CDMA的多用户UOWC系统模型,并给出了多用户收发信号的数学模型。然后介绍基于子空间的延时估计算法,该算法只需要已知所有用户的扩频码,然后根据扩频波形的循环移位在观测空间的信号子空间上的投影进行延时估计。 1、基于C…

【Linux进程】进程的 切换 与 调度(图形化解析,小白一看就懂!!!)

目录 🔥前言🔥 💧进程切换💧 💧进程调度💧 🔥总结与提炼🔥 🔥共勉🔥 🔥前言🔥 在 Linux 操作系统中,进程的 调度 与 …

【STM32-新建工程-寄存器版本】

STM32-新建工程-寄存器版本 ■ 下载相关STM32Cube官方固件包(F1,F4,F7,H7)■ 1. ST官方搜索STM32Cube■ 2. 搜索 STM32Cube■ 3. 点击获取软件■ 4. 选择对应的版本下载■ 5. 输入账号信息■ 6. 出现下载弹框&#xff…

React@16.x(34)动画(中)

目录 3,SwitchTransition3.1,原理3.1.2,key3.1.2,mode 3.2,举例3.3,结合 animate.css 4,TransitionGroup4.1,其他属性4.1.2,appear4.1.2,component4.1.3&…

MFC学习--CListCtrl复选框以及选择

如何展示复选框 //LVS_EX_CHECKBOXES每一行的最前面带个复选框//LVS_EX_FULLROWSELECT整行选中//LVS_EX_GRIDLINES网格线//LVS_EX_HEADERDRAGDROP列表头可以拖动m_listctl.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_CHECKBOXES | LVS_EX_GRIDLINES); 全选,全…

如何获得一个Oracle 23ai数据库(vagrant box)

准确的说,是Oracle 23ai Free Developer版,因为企业版目前只在云上(OCI和Azure)和ECC上提供。 前面我博客介绍了3种方法: Virtual ApplianceRPM安装Docker 今天介绍最近新出的一种方法,也是我最为推荐的…

探索CSS clip-path: polygon():塑造元素的无限可能

在CSS的世界里,clip-path 属性赋予了开发者前所未有的能力,让他们能够以非传统的方式裁剪页面元素,创造出独特的视觉效果。其中,polygon() 函数尤其强大,它允许你使用多边形来定义裁剪区域的形状,从而实现各…

定时器-前端使用定时器3s轮询状态接口,2min为接口超时

背景 众所周知,后端是处理不了复杂的任务的,所以经过人家的技术讨论之后,把业务放在前端来实现。记录一下这次的离大谱需求吧。 如图所示,这个页面有5个列表,默认加载计划列表。但是由于后端的种种原因,这…

【C#】使用数字和时间方法ToString()格式化输出字符串显示

在C#编程项目开发中,几乎所有对象都有格式化字符串方法,其中常见的是数字和时间的格式化输出多少不一样,按实际需要而定吧,现记录如下,以后会用得上。 文章目录 数字格式化时间格式化 数字格式化 例如,保留…

WPF三方UI库全局应用MessageBox样式(.NET6版本)

一、问题场景 使用HandyControl简写HC 作为基础UI组件库时,希望系统中所有的MessageBox 样式都使用HC的MessageBox,常规操作如下: 在对应的xxxx.cs 顶部使用using 指定特定类的命名空间。 using MessageBox HandyControl.Controls.Message…

快去复习吧+++常用算法及参考算法 递推法++穷举法++排序(冒泡、选择)++查找(顺序、折半)++字符串处理++方程求根++无穷级数求和

接上:常用算法及参考算法 (1)累加 (2)累乘 (3)素数 (4)最大公约数 (5)最值问题 (6)迭代法 常用算法及参考算法 7. 递推法…

【LocalAI】(13):LocalAI最新版本支持Stable diffusion 3,20亿参数图像更加细腻了,可以继续研究下

最新版本v2.17.1 https://github.com/mudler/LocalAI/releases Stable diffusion 3 You can use Stable diffusion 3 by installing the model in the gallery (stable-diffusion-3-medium) or by placing this YAML file in the model folder: Stable Diffusion 3 Medium 正…