Javascript预解析

为什么会讲到这个预解析呢,个人认为工作了很多年的前端可能都不一定搞清楚这个机制,所以还是将这个记录下来作为自己的学习笔记,同时也分享给广大的其他爱学习的前端开发者们。

我们先来看一段代码

sum(2, 10);
function sum(a, b){return a+b;
}

大家觉得这个的运行结果如何呢?是会报错还是会正常的执行呢?我们来看下运行结果

我们可以看到,运行结果为12,为什么会这样呢?这就牵扯到JS的预解析,首先Javascript会预解析代码中所有的变量和函数,因此在执行sum(2, 10)函数前已经将sum函数进行解析了,所以在调用sum函数的时候能正常输出。

我们来看下预解析后的情况吧

function sum(a, b){return a+b;
}
sum(2, 10);

。。。。。。

接下来我们看下下面的代码

sum(2, 10);
var sum = function(a, b){return a + b;
}

大家觉得这个函数的运行结果又如何呢?是报错还是正常执行呢?

。。。。。。

我们看一下结果吧,会发现这段代码会抛出如下错误

VM79:1 Uncaught TypeError: sum is not a function
at :1:1

为什么会出现这种结果呢?

让我们来还原一下Javascript的解析过程,还原后的结果如下:

var sum;		//先执行var定义变量sum
sum(2, 10);		//执行sum函数,报错,因为未定义sum函数
sum = function(a, b){return a + b;
}

最后拿个例题测试一下

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

以上的代码运行结果如何呢?

运行结果如下,是不是跟你推测的结果一致呢

ƒ c(){console.log(2);
}
------------------------------------------------------------------------------------------------------------
c

让我们来还原一下代码的预解析过程

function c(){console.log(2);
}
console.log(c);		//这个时候c是一个函数
var c = 1;
console.log(c);		//这个时候c是一个变量且值为1

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

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

相关文章

@z-utils组 重构和自动化实现

highlight: monokai theme: github 包简介 z-utils组 是一个可以在vue/react/pure js 中使用的工具包,它包含三个子类,分别为 z-utils/base, z-utils/react, z-utils/vue 三个分别在不同区域使用。 他是原 zzy-javascript-devtools 的重构版本&#xf…

嵌入式系统复习--Thumb指令集

文章目录 上一篇Thumb指令集概述Thumb指令详细介绍数据处理指令数据存储指令转移指令异常中断指令 下一篇 上一篇 嵌入式系统复习–ARM指令集(二) Thumb指令集概述 在编写Thumb指令时,先要用伪指令CODE16声明(ADS的编译环境下)&#xff0c…

程序设计的思想

程序设计思想是指在程序设计过程中所采用的一种思维方式,它是程序设计的灵魂和基础。程序设计思想的正确与否直接关系到程序的质量和可维护性。在实际的程序设计中,我们需要遵循一定的程序设计思想,以确保程序的正确性、可读性和可维护性。 …

序列化和反序列化对比分析,序列化和反序列化输出十个学生信息截图

序列化和反序列化是数据处理中的两个相对的概念,通常用于对象的存储和传输。下面是对这两个过程的对比分析: 序列化(Serialization) 定义 目的: 将对象的状态信息转换成可以存储或传输的形式(如XML, JSO…

【表的内连和外连】

目录: 前言表的内外连接内连接显示Amanda Jackson的名字和部门名称 外连接左外连接查询所有学生的成绩,如果这个学生没有成绩,也要将学生的个人信息显示出来 右外连接对stu表和exam表联合查询,把所有的成绩都显示出来,…

windows vs cmake项目+vcpkg

官方文档地址: vs中使用vcpkgcmake 官方文档地址:配置 CMake 调试会话 调整到CMake 目标视图,在对应的exe下右键选择“添加调试配置”切换回文件夹视图,在.vs下找到launch.vs.json文件,然后可以写调试使用的命令行参数 args&…

循环渲染ForEach

目录 1、接口说明 2、键值生成规则 3、组件创建规则 3.1、首次渲染 3.2、非首次渲染 4、使用场景 4.1、数据源不变 4.2、数据源组项发生变化 4.3、数据源数组项子属性变化 5、反例 5.1、渲染结果非预期 5.2、渲染性能降低 Android开发中我们有ListView组件、GridVi…

linux:IP地址、修改主机名、域名解析、虚拟机配置固定IP

一:IP地址 1、每一台联网的电脑都会有一个地址,用于和其它计算机进行通讯 2、IP地址主要有2个版本,V4版本和V6版本(V6很少用暂不涉及) 3、IPv4版本的地址格式是:a.b.c.d,其中abcd表示0~255的数字,如192.168.88.101就是一个标准的IP地址 4、可以通过命令:ifconfi…

视频监控技术经历了哪些发展阶段?视频监控技术未来趋势展望

随着城市经济的发展和进步,视频监控也已经应用在人们衣食住行的方方面面,成为社会主体的一个重要组成部分。随着视频监控的重要性越来越凸显,大家对视频监控技术的发展也非常关注。今天我们来简单阐述一下,视频监控技术经历的几个…

【delphi11】delphi进阶【九、自定义组件】

在 Delphi 中创建和使用自定义组件是一种扩展应用功能和重用代码的有效方法。自定义组件可以是可视化(如按钮、编辑框)或非可视化的(如数据库连接、计时器)。以下是一个详细介绍如何在 Delphi 中创建和使用自定义组件的指南&#…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)ChannelMap 模块的实现

(三)ChannelMap 模块的实现 这个模块其实就是为Channel来服务的,前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符,需要基于这个文件描述符进行它对应的事件处理,那怎么办呢&…

C++_类和对象基础操作(创建对象)

介绍 本文 主要介绍用类去创建一个现实中基本对象的 实例化操作 1.创建一个Dog,属性有姓名,犬龄,品种,毛色(不可以外部直接设置).行为有进食,奔跑,睡觉。 2.创建一个对象数组,存放4个学生(学号&…

windos/ubuntu20.4下UE4.27.2像素流送

windows/ubuntu20.4下UE4.27.2像素流送 像素流送技术可以将服务器端打包的虚幻引擎应用程序在客户端的浏览器上运行,用户可以通过浏览器操作虚幻引擎应用程序,客户端无需下载虚幻引擎,本文实现两台机器通过物理介质网线实现虚幻引擎应用程序…

企业出海-如何保护客户账户安全?

近年来国内企业竞争日益激烈,许多企业在这般环境下难以持续发展。那么该如何获得业务的可持续性增长,如何获取更多的客户的同时开阔公司的视野?出海便是如今帮助国内企业能快速发展壮大的潮流之一,摆脱了局限于国内发展的束缚奔向…

单调栈分类、封装和总结

作者推荐 map|动态规划|单调栈|LeetCode975:奇偶跳 通过枚举最小(最大)值不重复、不遗漏枚举所有子数组 C算法:美丽塔O(n)解法单调栈左右寻找第一个小于maxHeight[i]的left,right,[left,right]直接的高度都是maxHeight[i] 可以…

第十二章 异常-Exception

一、异常的概念(P444) Java 语言中,将程序执行中发生的不正常情况称为“异常”。(开发过程中的语法错误和逻辑错误不是异常) 执行过程中所发生的异常事件可分为两大类 (1)Error(错误…

OpenCV-Python(19):Canny边缘检测

目录 学习目标 Canny 边缘检测原理 1.噪声抑制(噪声去除) 2.梯度计算 3.非极大值抑制 4.双阈值检测(滞后阈值) 5.边缘连接 Canny 边缘检测步骤 Canny 边缘检测的OpenCV实现 不同阈值的边缘检测效果 学习目标 了解Canny边缘检测的概念学习掌握函数cv2.Canny()的用法 …

【星海出品】Keepalived 使用基础案例 (二)

keepalived 使用 [rootmaster ~]# cat /etc/keepalived/keepalived.conf ! Configuration File for keepalivedglobal_defs { //全局配置notification_email { //定义报警收件人邮件地址acassenfirewall.locfailoverfirewall.locsysadminfirewall.loc}notification_…

laravel 对接支付,本地穿透问题

本地穿透有好多工具,参考链接:https://zhuanlan.zhihu.com/p/339923535 我这边是用的 NATAPP 官网:https://natapp.cn/ 客户端下载:https://natapp.cn/# NATAPP1分钟快速新手图文教程:https://natapp.cn/article/n…

内部FLASH模拟EPPROM

本例程基于STM32F103ZET6 FLASH大小为512K。 介绍FLASH 不同型号的 STM32,其 FLASH 容量也有所不同,最小的只有 16K 字节,最大的则达到了 1024K 字节。我们的精英 STM32 开发板选择的是 STM32F103ZET6 的 FLASH 容量为 512K 字节&#xff0…