JavaScript 预编译与执行机制解析

news2024/10/7 20:26:31

在深入探讨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.coloradmin.cn/o/1854625.html

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

相关文章

网信办公布第六批深度合成服务算法备案清单,深兰科技大模型入选

6月12日,国家互联网信息办公室发布了第六批深度合成服务算法备案信息,深兰科技硅基知识智能对话多模态大模型算法通过相关审核,成功入选该批次《境内深度合成服务算法备案清单》。同时入选的还有腾讯混元大模型多模态算法、支付宝图像生成算法…

《分析模式》“鸦脚”表示法起源,Everest、Barker和Hay

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 《分析模式》这本书里面用的并不是UML表示法。作者Martin Fowler在书中也说了,该书写于1994-1995年,当时还没有UML。作者在书中用的是一种常被人称为“鸦脚”的…

Claude 3.5 Sonnet已经上线,Claude 3.5 Opus即将上线

https://docs.anthropic.com/en/docs/about-claude/models 人工智能学习网站 https://chat.xutongbao.top/

腾讯Hardcoder-Android通讯框架简介

APP 的功能和业务特性不依赖于该框架。 总而言之,由于Hardcoder是腾讯主导的,所以我们不用太担心兼容性问题,腾讯会和手机厂商进行洽谈并提供解决方案,并且目前已经支持Hardcoder框架的手机厂商有OPPO、vivo、华为、小米、三星、…

Django 模版转义

1,模版转义的作用 Django模版系统默认会自动转义所有变量。这意味着,如果你在模版中输出一个变量,它的内容会被转义,以防止跨站脚本攻击(XSS)。例如,如果你的变量包含HTML标签,这些…

Python 算法交易实验72 QTV200第一步: 获取原始数据并存入队列

说明 最近的数据流往前进了一步,我觉得基本可以开始同步的推进QTV200了。上次规划了整体的数据流,现在开始第一步。 内容 1 结构位置 这是上次的总体图: 以下是这次要实现的一小部分: 从结构上,这个是整体数据流的…

2025秋招NLP算法面试真题(二)-史上最全Transformer面试题:灵魂20问帮你彻底搞定Transformer

简单介绍 之前的20个问题的文章在这里: https://zhuanlan.zhihu.com/p/148656446 其实这20个问题不是让大家背答案,而是为了帮助大家梳理 transformer的相关知识点,所以你注意看会发现我的问题也是有某种顺序的。 本文涉及到的代码可以在…

sudo 权限之危险的 bash 命令

文章目录 [toc]事出有因干就完事了创建用户配置 sudo 权限sudo 验证使用 bash 命令执行 chmod 命令使用 bash 命令执行删根 事出有因 使用普通用户安装 tidb 时,发现报错了,报错内容如下: ERROR SSHCommand {"host": "…

green bamboo snake

green bamboo snake 【竹叶青蛇】 为什么写这个呢,因为回县城听说邻居有人被蛇咬伤,虽然不足以危及生命,严重的送去市里了。 1)这种经常都是一动不动,会躲在草地、菜地的菜叶里面、果树上、有时候会到民房大厅休息&a…

嵌入式系统中的加解密签名

笔者来了解一下嵌入式系统中的加解密 1、背景与名词解释 笔者最近在做安全升级相关的模块,碰到了一些相关的概念和一些应用场景,特来学习记录一下。 1.1 名词解释 对称加密:对称加密是一种加密方法,使用相同的密钥(…

如何搭建饥荒服务器

《饥荒》是由Klei Entertainment开发的一款动作冒险类求生游戏,于2013年4月23日在PC上发行,2015年7月9日在iOS发布口袋版。游戏讲述的是关于一名科学家被恶魔传送到了一个神秘的世界,玩家将在这个异世界生存并逃出这个异世界的故事。《饥荒》…

力扣SQL50 求关注者的数量 分组计数

Problem: 1729. 求关注者的数量 Code select user_id, count(1) followers_count from Followers group by user_id order by user_id;

stm32学习笔记---GPIO输入(代码部分)按键控制LED/光敏传感器控制蜂鸣器

目录 第一个代码:按键控制LED 模块化程序 LED驱动程序 GPIO的四个读取函数 GPIO_ReadInputDataBit GPIO_ReadInputData GPIO_ReadOutputDataBit GPIO_ReadOutputData Key驱动程序 第二个代码:光敏传感器控制蜂鸣器 蜂鸣器驱动代码 光敏传感器…

【内存管理】页面分配机制

前言 Linux内核中是如何分配出页面的,如果我们站在CPU的角度去看这个问题,CPU能分配出来的页面是以物理页面为单位的。也就是我们计算机中常讲的分页机制。本文就看下Linux内核是如何管理,释放和分配这些物理页面的。 伙伴算法 伙伴系统的…

K8s部署高可用Jenkins

小伙伴们大家好呀!断更了近一个月,XiXi去学习了一下K8s和Jenkins的相关技术。学习内容有些庞杂,近一个月的时间里我只学会了一些皮毛,更多的内容还需要后面不断学习,不断积累。最主要的是云主机真得很贵,为…

C++ | Leetcode C++题解之第155题最小栈

题目&#xff1a; 题解&#xff1a; class MinStack {stack<int> x_stack;stack<int> min_stack; public:MinStack() {min_stack.push(INT_MAX);}void push(int x) {x_stack.push(x);min_stack.push(min(min_stack.top(), x));}void pop() {x_stack.pop();min_sta…

多物理场仿真对新能源汽车用电机优化分析 衡祖仿真

1、问题所在 为了改善空气质量&#xff0c;减少环境污染&#xff0c;减少对石油的依赖&#xff0c;降低能源安全风险&#xff0c;国家大力倡导发展新能源汽车&#xff0c;大量新能源车企应运而生&#xff0c;竞争日趋激烈。使用经济效率较高的电机对于增强企业市场竞争力非常重…

常用加密算法之 RSA 简介及应用

引言 相关博文&#xff1a; Spring Boot 开发 – 常用加密算法简介&#xff08;一&#xff09;常用加密算法之 SM4 简介及应用 一、RSA算法简介 RSA &#xff08;Rivest-Shamir-Adleman&#xff09; 算法是一种非对称加密技术&#xff0c;由Ron Rivest、Adi Shamir和Leonar…

本地离线模型搭建指南-中文大语言模型底座选择依据

搭建一个本地中文大语言模型&#xff08;LLM&#xff09;涉及多个关键步骤&#xff0c;从选择模型底座&#xff0c;到运行机器和框架&#xff0c;再到具体的架构实现和训练方式。以下是一个详细的指南&#xff0c;帮助你从零开始构建和运行一个中文大语言模型。 本地离线模型搭…

spdlog生产者消费者模式

spdlog生产者消费者模式 spdlog提供了异步模式&#xff0c;显示的创建async_logger, 配合环形队列实现的消息队列和线程池实现了异步模式。异步logger提交日志信息和自身指针&#xff0c; 任务线程从消息队列中取出消息后执行对应的sink和flush动作。 1. 环形队列 1.1 环形队…