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.mzph.cn/bicheng/32789.shtml

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

相关文章

美团携手HarmonyOS SDK,开启便捷生活新篇章

华为开发者大会(HDC 2024)于6月21日在东莞松山湖拉开序幕,通过一系列精彩纷呈的主题演讲、峰会、专题论坛和互动体验,为开发者们带来了一场知识与技术的盛宴。6月23日,《HarmonyOS开放能力,使能应用原生易用…

如何在Java中实现数据加密与解密?

如何在Java中实现数据加密与解密? 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Java中实现数据加密与解密,这是保…

24-6-23-读书笔记(七)-《文稿拾零》豪尔赫·路易斯·博尔赫斯(第三辑)

文章目录 《文稿拾零》阅读笔记记录总结 《文稿拾零》 《文稿拾零》超厚的一本书(570),看得时间比较长,这本书是作者零散时间写的一些关于文学性质的笔记,读起来还是比较无趣的,非常零散,虽然有…

C++系列-String(二)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” #define _CRT_SECURE_NO_WARNINGS #include<string> #include<iostream> #include<list> #include<algorithm> using namespace std; void test_string…

【Android面试八股文】如果 onTouchEvent()方法返回false,onClick()方法还会执行么?

文章目录 一、onTouchEvent 返回 false 的情况二、示例场景分析三、结论在 Android 中,拦截事件通常指阻止事件继续传递或者消费事件,以防止它继续触发其他后续事件(比如 onClick())。 在 onTouchEvent() 方法中,如果返回 false,表示当前 View 没有处理该事件,Android …

Java启动jar设置内存分配详解

在微服务架构越来越盛行的情况下&#xff0c;我们通常一个系统都会拆成很多个小的服务&#xff0c;但是最终部署的时候又因为没有那么多服务器只能把多个服务部署在同一台服务器上&#xff0c;这个时候问题就来了&#xff0c;服务器内存不够&#xff0c;这个时候我们就需要对每…

Spring响应式编程之Reactor操作符

操作符 操作符Processo<T,R>&#xff08;1&#xff09;创建操作符&#xff08;2&#xff09;转换操作符&#xff08;3&#xff09;组合操作符&#xff08;4&#xff09;条件操作符&#xff08;5&#xff09;错误处理操作符 操作符Processo<T,R> 操作符并不是响应式…

【Python机器学习实战】 | 基于线性回归以及支持向量机对汽车MPG与自重进行回归预测

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

【Android面试八股文】请你描述一下JVM的内存模型

文章目录 JVM内存模型1. 方法区(Method Area)运行时常量池(Runtime Constant Pool)2. 堆(Heap)3. 栈(Stack)4. 本地方法栈(Native Method Stack)5. 程序计数器(Program Counter Register)6. 直接内存(Direct Memory)JVM内存溢出的情况Java的口号是: “Write onc…

【Flink metric】Flink指标系统的系统性知识:以便我们实现特性化数据的指标监控与分析

文章目录 一. Registering metrics&#xff1a;向flink注册新自己的metrics1. 注册metrics2. Metric types:指标类型2.1. Counter2.2. Gauge2.3. Histogram(ing)4. Meter 二. Scope:指标作用域1. User Scope2. System Scope ing3. User Variables 三. Reporter ing四. System m…

tensorRT C++使用pt转engine模型进行推理

目录 1. 前言2. 模型转换3. 修改Binding4. 修改后处理 1. 前言 本文不讲tensorRT的推理流程&#xff0c;因为这种文章很多&#xff0c;这里着重讲从标准yolov5的tensort推理代码&#xff08;模型转pt->wts->engine&#xff09;改造成TPH-yolov5&#xff08;pt->onnx-…

如何关闭软件开机自启,提升电脑开机速度?

如何关闭软件开机自启&#xff0c;提升电脑开机速度&#xff1f;大家知道&#xff0c;很多软件在安装时默认都会设置为开机自动启动。但是&#xff0c;有很多软件在我们开机之后并不是马上需要用到的&#xff0c;开机启动的软件过多会导致电脑开机变慢。那么&#xff0c;如何关…

【break】大头哥哥做题

【break】大头哥哥做题 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 【参考代码】 #include <iostream> using namespace std; int main(){ int sum 0;//求和int day 0;//天数 while(1){int a;cin>>a;if(a-1){break;//结束当前循环 }sum sum a; …

HTTP基本概念介绍

HTTP概述 HTTP : 超文本传输协议&#xff0c;HTTP是浏览器端Web通信的基础。 一&#xff0c; 两种架构 B/S架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构。 B: 浏览器&#xff0c;比如Firefox 、Google 、Internet; S: 服务器&#xff0c;Apache&#xff0c…

[stm32]温湿度采集与OLED显示

一、I2C总线协议 I2C&#xff08;Inter-integrated circuit &#xff09;是一种允许从不同的芯片或电路与不同的主芯片通信的协议。它仅用于短距离通信&#xff0c;是一种用于两个或多个设备之间进行数据传输的串行总线技术&#xff0c;它可以让你在微处理器、传感器、存储器、…

6月20日(周四)A股行情总结:A股险守3000点,恒生科技指数跌1.6%

A股三大股指走弱&#xff0c;科创板逆势上扬&#xff0c;半导体板块走强&#xff0c;多股20CM涨停。中芯国际港股涨超1%。恒生科技指数跌超1%。离岸人民币对美元汇率小幅走低&#xff0c;20日盘中最低跌至7.2874&#xff0c;创下2023年11月中旬以来的新低&#xff0c;随后收复部…

287 寻找重复数-类似于环形链表II

题目 给定一个包含 n 1 个整数的数组 nums &#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;可知至少存在一个重复的整数。 假设 nums 只有 一个重复的整数 &#xff0c;返回 这个重复的数 。 你设计的解决方案必须 不修改 数组 nums…

理解堆排序

堆排序&#xff08;Heapsort&#xff09;是一种基于堆这种数据结构的排序算法&#xff0c;但在实际实现中&#xff0c;堆通常是用数组来表示的。这种方法充分利用了数组的特性&#xff0c;使得堆的操作更加高效。下面通过详细解释和举例说明来帮助理解这种排序方式。 堆的数组…

Linux应急响应——知攻善防应急靶场-Linux(1)

文章目录 查看history历史指令查看开机自启动项异常连接和端口异常进程定时任务异常服务日志分析账户排查总结 靶场出处是知攻善防 Linux应急响应靶机 1 前景需要&#xff1a; 小王急匆匆地找到小张&#xff0c;小王说"李哥&#xff0c;我dev服务器被黑了",快救救我&…

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发 专业版 插件版 手持弹幕小程序通常提供多种功能&#xff0c;以便用户在不同的场合如夜店、表白、接机等使用。以下是一些常见的功能列表&#xff1a; 文本输入&#xff1a; 输入要显示的文字内容&#xff0c;…