【JavaScript】预解析 ② ( 预解析示例分析 | 分步骤分析预解析过程 )

文章目录

  • 一、预解析示例分析一
    • 1、要分析的代码
    • 2、代码预解析分析
    • 3、作用域链分析
  • 二、预解析示例分析二
    • 1、要分析的代码
    • 2、代码预解析分析
  • 三、预解析示例分析三
    • 1、要分析的代码
    • 2、预解析过程分析





一、预解析示例分析一




1、要分析的代码


要分析的 代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        var num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }
    </script>
</head>

<body>
</body>

</html>

执行结果如下 :

在这里插入图片描述


2、代码预解析分析


给定如下代码 , 分析 JavaScript 预解析过程 ;

        var num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }

分析上述代码 的 预解析过程 :

全局作用域 的 var num = 666; 变量 , 进行 预解析 , 提升该变量 到 全局作用域 顶部 , 提升后的效果如下 :

		// ★ 本步骤要点
		var num;
        num = 666;

        fun();

        function fun() {
            console.log(num);
            var num = 888;
        }

全局作用域 的 fun 函数 预解析 , 将该函数 提升到 全局作用域 最顶部 , 在 var num 的下方 ;

		var num;
		// ★ 本步骤要点
        function fun() {
            console.log(num);
            var num = 888;
        }
        num = 666;

        fun();

fun 函数 的 局部作用域 中的 var num = 888; 变量 进行 预解析 , 将该 变量 在 局部作用域 中 提升到 最顶端 ;

该提升操作 , 也是只提升变量声明 , 变量 初始化赋值 操作 仍然保留在原地 ;

		var num;
        function fun() {
        	// ★ 本步骤要点
        	var num;
            console.log(num);
            num = 888;
        }
        num = 666;

        fun();

这是 JavaScript 预解析 的最终 结果 ;


3、作用域链分析


预解析结果如下 :

		var num;
        function fun() {
        	var num;
            console.log(num);
            num = 888;
        }
        num = 666;

        fun();

在 fun 函数的 局部作用域中 , 执行 console.log(num); 代码 , 打印 num 变量的值 ,

num 变量查找 , 需要沿着 上述 JavaScript 代码的 作用域链 逐层 向上查找 ,

优先 查找 局部作用域 num 变量 , 然后再向上 查找 全局作用域 中的 num 变量 ;


在 fun 函数 的 局部作用域 中 , 找到了 num 变量 , var num; , 但是 该 num 变量 只进行了 声明 , 没有进行初始化 操作 ,

在 num 变量 声明后 , 未初始化前 , 打印 num 的值为 undefined ;





二、预解析示例分析二




1、要分析的代码


要分析的 代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        var num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


2、代码预解析分析


给定如下代码 , 分析 JavaScript 预解析过程 ;

        var num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }

先 预解析 全局作用域的 num 变量 , 将 var num; 提升到 全局作用域最顶端 , num 变量初始化仍然留在原地 , 完成后代码变为 :

		// ★ 本步骤要点
        var num;
        num = 666;
        fun();
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }

然后 将 fun 函数声明 , 提升到 全局作用域 顶端 , 全局 num 变量声明 的 下面 ;

        var num;
        // ★ 本步骤要点
        function fun() {
            var num2 = 333;
            console.log(num);
            console.log(num2);
            var num = 888;
        }
        num = 666;
        fun();

再后 对 fun 函数 局部作用域 的 num2 和 num 进行预解析 , 将 变量 声明 提升到 局部作用域 的顶端 , 将 变量 初始化赋值 留在原地 , 预解析后的结果如下 :

        var num;
        function fun() {
        	// ★ 本步骤要点
            var num2;
            var num;
            num2 = 333;
            console.log(num);
            console.log(num2);
            num = 888;
        }
        num = 666;
        fun();

在上述 fun 函数 局部作用域 , 打印 num 变量时 , 局部作用域 的 num 变量还没有 初始化 , 打印的值为 undefined , 打印 num2 变量时 , 局部作用域 的 num2 变量 已经赋值 333 , 因此执行结果如下 :

在这里插入图片描述





三、预解析示例分析三




1、要分析的代码


要分析的 代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 预解析示例

        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


2、预解析过程分析


预解析的代码 :

        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }

全局作用域 的 fun 函数预解析 , 将 该函数 提升到 全局作用域 的最顶端 ;

		// ★ 本步骤要点
        function fun() {
            var num = num1 = num2 = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
        
        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

下面分析 局部作用域的 var num = num1 = num2 = 888; 语句 , num1 和 num2 变量 没有经过声明直接使用 , 这两个变量等同于 全局变量 ;

这里将这两个变量 提升到全局作用域 的最顶端 ;

本步骤预解析结果如下 :

		var num1;
		var num2;
		// ★ 本步骤要点
        function fun() {
            var num; 
            num2 = 888;
            num1 = 888; 
            bnum = 888;
            console.log(num);
            console.log(num1);
            console.log(num2);
        }
        
        fun();

        console.log(num1);
        console.log(num2);
        console.log(num);

在 fun 函数内部 , 可以打印出 3 个变量的值 888 ;

在 全局作用域中 , 可以打印出 num1 和 num2 的值 888 , 但是 num 变量是 fun 函数的 局部变量 , 访问不到 , 因此 全局作用域 打印 num 变量会报错 ;

Uncaught ReferenceError: num is not defined
    at hello.html:17:21

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

人工智能前沿成科技竞争新高地

以下文章来源&#xff1a;经济参考报 近日&#xff0c;首届中国具身智能大会&#xff08;CEAI 2024&#xff09;在上海举行。作为人工智能领域的前沿热点&#xff0c;具身智能正逐步走进现实&#xff0c;成为当前全球科技竞争的新高地、未来产业的新赛道、经济发展的新引擎。 “…

人工智能_大模型018_AssistantsAPI_01_---人工智能工作笔记0154

先来说一下一些问题: 尽量不要微调,很麻烦,而且效果需要自己不断的去测试. 如果文档中有图表,大量的图片去分析就不合适了. 是否用RAG搜索,这个可以这样来弄,首先去es库去搜能直接找到答案可以就不用去RAG检索了,也可以设置一个分,如果低于60分,那么就可以去进行RAG检索 微…

视频实例分割 | 基于ViT实现的端到端end-to-end+query-based的视频实例分割

项目应用场景 面向视频实例分割场景&#xff0c;项目采用 Vision-Transformer 深度学习算法来实现。 项目效果 项目细节 > 具体参见项目 README.md (1) 创建 python 开发环境 conda create --name tevit python3.7.7 conda activate tevit (2) 安装依赖 torch1.9.0 torch…

XC7A35T-2FGG484 嵌入式FPGA现场可编程门阵列 Xilinx

XC7A35T-2FGG484 是一款由Xilinx&#xff08;赛灵思&#xff09;制造的FPGA&#xff08;现场可编程门阵列&#xff09;芯片 以下是XC7A35T-2FGG484 的主要参数&#xff1a; 1. 系列&#xff1a;Artix-7 2. 逻辑单元数量&#xff1a;33280个 3. 工艺技术&#xff1a;28nm 4. …

postgresql发布和订阅

一、发布订阅介绍 发布和订阅使用了pg的逻辑复制的功能&#xff0c;通过发布端创建publication与表绑定&#xff0c;订阅端创建subscription同时会在发布端创建逻辑复制槽实现逻辑复制功能 逻辑复制基于 发布&#xff08;Publication&#xff09; 与 订阅&#xff08;Subscri…

Few-Shot目标检测数据集 | Few-Shot目标检测数据集_已经整理成MS-COCO数据格式_含60000+张图_可直接用于目标检测算法训练

项目应用场景 面向 Few-Shot 目标检测场景&#xff0c;项目提供 6000 张图&#xff0c;已经整理成 MS-COCO 数据格式&#xff0c;可用于 Few-Shot 目标检测的训练数据集&#xff0c;或作为 Few-Shot 目标检测数据集的补充。 数据集展示 数据集下载 > 具体参见项目 README.m…

FreeBuf 全球网络安全产业投融资观察(3月)

综述 据不完全统计&#xff0c;2024年3月&#xff0c;全球网络安全市场共发生投融资事件53起&#xff0c;其中国内4起&#xff0c;国外49起。 3月全球络安全产业投融资统计表&#xff08;数据来源&#xff1a;航行资本、36氪&#xff09; 整体而言&#xff0c;国内4起投融资事…

数字图像处理基础

目录 概述 仿射变换 常见的灰度处理算法 空间域滤波原理 空间域平滑滤波&#xff08;低通滤波&#xff09; 空间域锐化滤波&#xff08;高通滤波&#xff09; 傅里叶变换 频率域与空间域的对应关系 频率域滤波 形态学处理基础知识 边缘检测原理 检测孤立点 检测线…

软考之零碎片段记录(九)+复习巩固(四)

一、学习 1. 英语单词 delivery:交付 automation:自动化 build-in:内置 Iwell-konwn:众所周知 modern:现代 hands-off:无干预 labor-free:免人工 visual:可视化 object-oriented:面向对象的 structural:结构化的 2. 案例 E1: 租户信息 E2: 农户 E3: 租户 E4: 用户 3. 案例…

giteegit的连结使用

目标&#xff1a;在windows的本地的git上操作的项目存放到Gitee云端上 不适用于linux的terminal终端下 1.先下载好Git这个软件 2.创建一个文件夹&#xff08;项目名称&#xff09; 然后用gitbash的形式打开 3.创建ssh密钥到Gitee上 因为我们在Git与Gitee上的传输是通过ssh…

OpenCV图像处理——基于OpenCV的ORB算法实现目标追踪

概述 ORB&#xff08;Oriented FAST and Rotated BRIEF&#xff09;算法是高效的关键点检测和描述方法。它结合了FAST&#xff08;Features from Accelerated Segment Test&#xff09;算法的快速关键点检测能力和BRIEF&#xff08;Binary Robust Independent Elementary Feat…

Golang | Leetcode Golang题解之第17题电话号码的字母组合

题目&#xff1a; 题解&#xff1a; var phoneMap map[string]string map[string]string{"2": "abc","3": "def","4": "ghi","5": "jkl","6": "mno","7": &…

数据处理|dataframe的连接操作merge

pd.merge() pd.merge(left, right, howinner, onNone, left_onNone, right_onNone,left_indexFalse, right_indexFalse, sortTrue,suffixes(_x, _y), copyTrue, indicatorFalse,validateNone)merge内部的各种参数 pd.left,pd.right left用来指代左边要拼接的dataframe right…

RocketMQ 之 IoT 消息解析:物联网需要什么样的消息技术?

作者&#xff1a;林清山&#xff08;隆基&#xff09; 前言&#xff1a; 从初代开源消息队列崛起&#xff0c;到 PC 互联网、移动互联网爆发式发展&#xff0c;再到如今 IoT、云计算、云原生引领了新的技术趋势&#xff0c;消息中间件的发展已经走过了 30 多个年头。 目前&a…

【论文阅读——Profit Allocation for Federated Learning】

1.摘要 由于更为严格的数据管理法规&#xff0c;如《通用数据保护条例》&#xff08;GDPR&#xff09;&#xff0c;传统的机器学习服务生产模式正在转向联邦学习这一范式。联邦学习允许多个数据提供者在其本地保留数据的同时&#xff0c;协作训练一个共享模型。推动联邦学习实…

知识管理系统|基于Springboot和vue的知识管理系统设计与实现(源码+数据库+文档)

知识管理 目录 基于Springboot和vue的知识管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台&#xff1a; 5.2.2 文章信息 5.3.1 论坛交流 2、后台 用户管理 5.1.2 文章分类 5.2.1 资料分类 四、数据库设计 五、核心代码 六、论文参考 七、最…

【面经】2023年软件测试面试题大全(持续更新)附答案

前阵子一位读者告诉我&#xff0c;某位大厂HR给他发了我之前做的面试题答案合集。 这个消息让我开心了一整天&#x1f602;&#xff0c;因为这说明我之前做的面试题系列真的能帮助到部分测试同学&#xff0c;也算是侧面得到了一种认可吧。 坚持可是我们程序员家族的优良传统&a…

一款轻量、干净的 Laravel 后台管理框架

系统简介 ModStart 是一个基于 Laravel 的模块化快速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 系统特性 …

tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图

文章目录 前言一、实现步骤1. 获取所需特征点的索引2. 使用opencv.js 计算俯仰角、水平角和翻滚角cv.solvePnP介绍cv.solvePnP原理运行代码查看效果 3.绘制姿态示意直线添加canvas元素计算姿态直线坐标并绘制 总结 前言 在计算机视觉领域&#xff0c;估算脸部姿态是一项具有挑…

thinkphp6中使用监听事件和事件订阅

目录 一&#xff1a;场景介绍 二&#xff1a;事件监听 三&#xff1a;配置订阅 一&#xff1a;场景介绍 在项目开发中有很多这样的场景&#xff0c;比如用户注册完了&#xff0c;需要通知到第三方或者发送消息。用户下单了&#xff0c;需要提示给客服等等。这些场景都有一个…