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

JavaScript基础学习:预解析机制

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 行为的关键。

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 2024 RedisAnd Mysql基础与进阶操作系列(13)作者——LJS[你个小黑子这都还学不会嘛?你是真爱粉嘛?真是的 ~;以后请别侮辱我家鸽鸽]
  • 螺栓与散装物体检测系统源码分享
  • idea生成类信息及快捷开发配置
  • PHP邮件发送教程:如何用PHP发送电子邮件?
  • SQLServer TOP(Transact-SQL)
  • 隨著 iOS 18 到來,AirPods Pro 2 解鎖移動頭部回應 Siri 功能
  • 【PyQt5】object属性
  • 2023年全国研究生数学建模竞赛华为杯B题DFT类矩阵的整数分解逼近求解全过程文档及程序
  • idea多模块启动
  • 【北京迅为】《STM32MP157开发板使用手册》- 第三十九章 消息队列实验
  • k8s常用指令续:
  • 避免死锁发生的策略
  • 240919-Pip先在线下载不安装+再离线安装
  • AI助力智慧农田作物病虫害监测,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建花田作物种植场景下棉花作物常见病虫害检测识别系统
  • 一道涉及 Go 中的并发安全和数据竞态(Race Condition)控制的难题
  • 【刷算法】求1+2+3+...+n
  • AWS实战 - 利用IAM对S3做访问控制
  • C++11: atomic 头文件
  • canvas 绘制双线技巧
  • Create React App 使用
  • IDEA 插件开发入门教程
  • JavaScript设计模式之工厂模式
  • Linux各目录及每个目录的详细介绍
  • select2 取值 遍历 设置默认值
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • 阿里云Kubernetes容器服务上体验Knative
  • 代理模式
  • 老板让我十分钟上手nx-admin
  • 普通函数和构造函数的区别
  • 山寨一个 Promise
  • 世界上最简单的无等待算法(getAndIncrement)
  • 试着探索高并发下的系统架构面貌
  • 手写一个CommonJS打包工具(一)
  • 微信开放平台全网发布【失败】的几点排查方法
  • 我感觉这是史上最牛的防sql注入方法类
  • 新书推荐|Windows黑客编程技术详解
  • Unity3D - 异步加载游戏场景与异步加载游戏资源进度条 ...
  • #NOIP 2014# day.1 T2 联合权值
  • #Spring-boot高级
  • #我与Java虚拟机的故事#连载19:等我技术变强了,我会去看你的 ​
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (一) 初入MySQL 【认识和部署】
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)创业家杂志:UCWEB天使第一步
  • (转载)hibernate缓存
  • .aanva
  • .Net 6.0--通用帮助类--FileHelper
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划