JavaScript基础学习:预解析机制

news2024/9/20 1:27:44

JavaScript基础学习:预解析机制

前言

JavaScript 的世界里,代码的执行并不是简单地从上到下按顺序进行的。

在实际执行之前,JavaScript 引擎会进行一个特殊的阶段,称为“预解析”。

这一阶段对于理解 JavaScript 的行为至关重要。本文将详细解释预解析的概念、过程以及它如何影响代码的执行。

一、预解析是什么?

预解析是 JavaScript 代码在执行前的准备阶段。

在这个阶段,JavaScript 引擎会做以下几件事情:

  1. 创建词法环境:为即将执行的代码创建一个词法作用域。
  2. 扫描变量和函数声明:查找所有的var声明的变量和function声明的函数,并将它们加入到当前的词法环境中。
  3. 存储声明:将这些变量和函数的声明存储在内存中,但不会执行它们的赋值或函数体。

二、预解析的过程

预解析的过程可以概括为以下几个步骤:

  1. 扫描变量声明:找到所有的var声明,并将它们作为未初始化的变量加入到词法环境中。
  2. 扫描函数声明:找到所有的function声明,并将它们作为函数对象加入到词法环境中。
  3. 跳过赋值操作:在预解析阶段,等号右边的赋值操作不会被执行。

三、预解析对代码执行的影响

预解析对代码的执行有显著的影响。以下是一些关键点:

  • 变量提升:在预解析阶段,var声明的变量会被提升到它们所在作用域的顶部,但它们的赋值不会提升。
  • 函数提升function声明的函数也会被提升到它们所在作用域的顶部,这意味着函数可以在声明之前被调用。
  • 变量和函数的重名问题:如果一个变量和函数同名,变量声明会被覆盖。

四、代码示例

让我们通过一些示例来更好地理解预解析是如何工作的。

var b = 123;
function b() {
}

console.log(c);
var c = 1;
console.log(c);
function c() {
    console.log(2);
}

解析过程

  1. 预解析阶段:
    • var b;
    • function b() {}
  2. 执行阶段:
    • b = 123;
    • console.log(c); // 输出undefined,因为c的声明在预解析阶段被提升,但赋值没有。
    • var c; // 再次声明c,但此时c已经被提升为函数,所以变量声明被忽略。
    • c = 1; // 将c的值设置为1
    • console.log(c); // 输出1,因为c现在是一个变量。

测试结果

  • 第一个console.log(c);输出undefined,因为c在预解析阶段被提升为函数,但赋值没有被提升。
  • 第二个console.log(c);输出1,因为c已经被赋值为1

五、总结

预解析是 JavaScript 中一个非常重要的机制,它影响着变量和函数的声明、提升以及作用域。

理解预解析有助于编写更清晰、更可预测的 JavaScript 代码。

记住,预解析只处理声明,不会执行赋值或函数体,这是理解 JavaScript 行为的关键。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

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

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

相关文章

2025武汉国际半导体产业与电子技术博览会

时间:2025年5月14日-16日地点:武汉中国光谷科技会展中心 展会简介: 为了推动中西部地区电子信息产业的跨越式发展,促进先进技术在中西部地区的创新应用,由中国光电子发展大会组委会联合沃森展览共同打造的2025 武汉国…

网络安全 DVWA通关指南 DVWA Stored Cross Site Scripting (存储型 XSS)

DVWA Stored Cross Site Scripting (存储型 XSS) 文章目录 DVWA Stored Cross Site Scripting (存储型 XSS)XSS跨站原理存储型 LowMediumHighImpossible 参考文献 WEB 安全靶场通关指南 XSS跨站原理 当应用程序发送给浏览器的页面中包含用户提交的数据,但没有经过适…

Yocto - 使用Yocto开发嵌入式Linux系统_01 前言

Embedded Linux Development Using Yocto Project: Leverage the power of the Yocto Project to build efficient Linux-based products, Third Edition By: Otavio Salvador, Daiane Angolini Overview of this book Yocto 项目是开发可靠的嵌入式 Linux 项目的行业标准。与…

C++ | Leetcode C++题解之第405题数字转换为十六进制数

题目: 题解: class Solution { public:string toHex(int num) {if (num 0) {return "0";}string sb;for (int i 7; i > 0; i --) {int val (num >> (4 * i)) & 0xf;if (sb.length() > 0 || val > 0) {char digit val …

内存管理(C++版)

C/C内存分布 程序经过编译生成可执行的二进制程序,我们可以把虚拟进程地址分为以下四个空间:栈,堆,常量区,静态区。这四个区里面存贮的也是不一样的内容。 各个区域所存储内容的说明 栈/堆栈:用于建立函…

C++—string类接口与用法大总结(其中涉及STL基础)

目录 1.string类的本质 2.string类的构造 1.普通构造 2.功能型构造 1.拷贝构造功能型 2.带参构造功能型 3.其余构造 3.operator[] 4.迭代器(iterator) 1.概念 2.改变string对象本身 3.正向迭代器(iterator) 4.反向迭代…

基于springboot的驾校预约管理系统的设计与实现 (含源码+sql+视频导入教程)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的驾校预约管理系统5拥有三种角色:管理员、教练、学员 管理员:学员管理、教练管理、车辆管理、车辆关联、维修管理等 教练:学员查看/毕…

通过Python代码发送量化交易信号邮件通知

量化交易利用数学模型和计算机算法来分析市场数据,并生成交易信号,本文将介绍如何使用Python编写一个简单的脚本,通过发送邮件通知量化交易信号。 开启SMTP服务 首先要在发件箱的邮件设置中,将POP3/SMPT服务开启,记录下授权密码,在本地可通过此密码登录,注意有效期和保…

总结拓展十:SAP开发计划(下)

第一节 接口功能开发说明书设计 1、软件系统接口作用 答:系统接口,是实现系统间数据传输的功能。 2、软件系统接口特点 1)采用Web Service技术作为平台,有众多的数据传输协议标准,通过API与外界交流数据。 2&…

向上转移和向下转型

向上转型 实际就是创建一个子类对象,将其当成父类对象来使用。格式:父类类型 对象名new 子类类型();eg:Animal animalnew Cat();animal是父类类型,但可以引用…

超详细超实用!!!零基础java开发之云风笔记接口开发之查询单条笔记详细信息(十二)

云风网 云风笔记 云风知识库 一、service/NoteApi新增getNodeDetail接口定义 public interface NoteApi {...NoteManage getNoteDetail(int id); }二、service/impl/NoteServiceImpl接口实现逻辑 public class NoteServiceImpl implements NoteApi {AutowiredNoteMapper not…

产品经理入门攻略:如何从零开始成为产品经理

“人人都是产品经理”这句话相信你一定听过。 作为现在的热门职业,许多朋友也在心里埋下了一颗想要成为产品经理的种子。 产品经理的工作其实没有传说中的那么“高大上”,甚至可以说大多数时候是枯燥且无聊的,需要不断地对数据进行分析&…

如何在ONLYOFFICE文档中,将新插件添加为选项卡

随着 ONLYOFFICE 文档8.1版本的推出,我们引入了各式各样的功能,旨在增强软件功能性和优化用户体验。其中一项改进是,插件可以显示在一个独立的选项卡中了。在本博客文章中,我们将带您了解充分利用这一新功能的各项步骤。 关于 ONL…

图像修复(Inpainting)技术的前沿模型与数据集资源汇总

图像修复(Image Inpainting)是一种计算机视觉技术,旨在填补图像中的缺失区域或去除图像中的不需要部分,使其看起来自然且无明显痕迹。其目标是根据图像的上下文信息和周围像素来推断和重建缺失区域的内容,以生成逼真且…

实战17-NavBar+Vip布局

NavBar.ets import { PADDING } from ../../constants/size import rvp from ../../utils/resposive/rvIndexComponent export default struct NavBar {StorageProp(topHeight) topHeight: number 0;build() {Row() {Row({ space: rvp(6) }) {Text(请选择地址).fontSize(rvp(1…

Java基础笔记1】Java基础语法

目录 一、Java简介 二、JDK和Java初体验 三、配置环境变量 四、IDEA快捷键 五、Java语法基础 1. 注释 2. 字面量 3. 变量 4. 关键字和标识符 5. 变量详解 a. 数值数据在计算机中的存储​编辑 b. 文本、图片、音频等数据在计算机中的存储 c. 八进制和十六进制 6. 数据类型 a. …

【LabVIEW】事件结构的用法

本篇文章记录我学习LabVIEW的事件结构用法,希望我的分享对你有所帮助! 目录 一、案例说明 1、 LabVIEW实现“YAXBXC的计算” 2、添加事件结构 一、案例说明 在LabVIEW实现“YAXBXC的计算”的基础上,加上事件结构,实现单击一次按…

【读书笔记-《30天自制操作系统》-22】Day23

本篇内容比较简单,集中于显示问题。首先编写了应用程序使用的api_malloc,然后实现了在窗口中画点与画线的API与应用程序。有了窗口显示,还要实现关闭窗口的功能,于是在键盘输入API的基础上实现了按下按键关闭窗口。最后发现用上文…

初学者笔记本电脑玩转大模型系列二:微调谷歌Gemma模型

之前分享了《初学者笔记本电脑玩转大模型系列一:利用ollama跑大模型》,这不,Google发布了Gemma开放模型,同等参数尺寸性能最好的大模型,那么言归正传,如何在笔记本电脑微调Gemma模型呢?我们接下…