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

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

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


http://www.kler.cn/news/311056.html

相关文章:

  • 8-----手机机型维修工具助手 功能较全 涵盖解锁 刷机 修复等选项 维修推荐
  • dll注入的实现及session0注入
  • 编译器/工具链环境:GCC vs LLVM/Clang,MSVCRT vs UCRT
  • 继承1 2024_9_18
  • kafka之路-01从零搭建环境到SpringBoot集成
  • leetcode 四数相加||
  • PostgreSQL - SQL语句1
  • 系统在哪些情况下会触发缺页中断
  • oracle pkg正在跑如何停止
  • A review on rumour prediction and veracity assessment in online social network
  • ROM和RAM的区别
  • 简易CPU设计入门:本CPU项目的指令格式
  • macOS平台编译MAVSDK源码生成mavsdk库与mavsdk_server服务可执行文件
  • 云曦2024秋考核
  • CSS 常用元素属性
  • 第四天旅游线路预览——从贾登峪到喀纳斯景区入口(贾登峪游客服务中心)
  • 【Axure教程】高级搜索
  • 黑马头条day2-预览
  • 链动321公排自动滑落模式小程序开发:商城系统
  • react 路由 react-router/react-router-dom
  • 链接升级:Element UI <el-link> 的应用
  • Java数据结构(十)——冒泡排序、快速排序
  • 【论文阅读】Slim Fly: A Cost Effective Low-Diameter Network Topology 一种经济高效的小直径网络拓扑
  • 【C++算法】模拟算法
  • 对 JavaScript 原型的理解
  • dll文件丢失怎么恢复?10种dll修复方法任你选,一次学会!
  • 算法题目复习(0909-0917)
  • Sqoop 数据迁移
  • git reflog
  • 机器学习:逻辑回归--过采样