JS中关于预编译的【关键知识点】总结
在JavaScript中,预编译(hoisting)是指在代码执行之前,JavaScript引擎会首先对代码进行扫描,将所有的变量声明和函数声明提升到代码的最顶部。这一过程使得我们在代码中可以在声明之前使用变量和函数。理解预编译对于深入理解JavaScript的执行机制至关重要。以下是预编译的几个关键知识点:
1. 变量声明提升
JavaScript会将变量声明(var)提升到当前作用域的顶部,但是不会提升变量的赋值。
示例:
console.log(x); // 输出: undefined
var x = 5;
console.log(x); // 输出: 5
解释:
在预编译阶段,这段代码实际上变成了:
var x;
console.log(x); // 输出: undefined
x = 5;
console.log(x); // 输出: 5
因此,在第一次console.log调用时,x已经被声明但未赋值,因此输出undefined。
2. 函数声明提升
函数声明会被整体提升到当前作用域的顶部,这意味着函数可以在声明之前被调用。
示例:
hoistedFunction(); // 输出: "This function has been hoisted!"function hoistedFunction() {console.log("This function has been hoisted!");
}
解释:
在预编译阶段,这段代码实际上变成了:
function hoistedFunction() {console.log("This function has been hoisted!");
}hoistedFunction(); // 输出: "This function has been hoisted!"
3. 函数表达式不提升
函数表达式不会被提升,因此在声明之前调用函数表达式会导致错误。
示例:
console.log(notHoisted); // 输出: undefined
notHoisted(); // 抛出TypeError: notHoisted is not a functionvar notHoisted = function() {console.log("This function is not hoisted.");
};
解释:
在预编译阶段,这段代码实际上变成了:
var notHoisted;
console.log(notHoisted); // 输出: undefined
notHoisted(); // 抛出TypeError: notHoisted is not a functionnotHoisted = function() {console.log("This function is not hoisted.");
};
由于notHoisted在声明之前被调用,因此它的值是undefined,无法作为函数调用。
4. let和const的特性
let和const声明的变量不会被提升到作用域顶部,但会在声明之前处于暂时性死区(Temporal Dead Zone,TDZ)。
示例:
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 3;console.log(b); // ReferenceError: Cannot access 'b' before initialization
const b = 5;
解释:
let和const的变量在声明之前无法被访问,尝试访问会导致ReferenceError。这与var的行为不同。
5. 预编译过程概述
在代码执行之前,JavaScript引擎会经历以下预编译步骤:
- 创建全局执行上下文(Global Execution Context)。
- 扫描代码,查找变量声明(
var)、函数声明。 - 将变量声明提升到当前作用域顶部,并初始化为
undefined。 - 将函数声明提升到当前作用域顶部,并将函数体赋值给对应标识符。
- 执行代码。
示例:
function example() {console.log(a); // 输出: undefinedvar a = 2;console.log(b); // 输出: function b() { console.log("This is function b"); }function b() {console.log("This is function b");}
}example();
解释:
在预编译阶段,这段代码实际上变成了:
function example() {var a;function b() {console.log("This is function b");}console.log(a); // 输出: undefineda = 2;console.log(b); // 输出: function b() { console.log("This is function b"); }
}example();
在预编译阶段,a和b已经被提升,a初始化为undefined,b初始化为函数体。
结论
预编译是JavaScript执行过程中的一个重要机制,通过理解变量和函数的提升,我们可以更好地理解代码的执行顺序,避免意外的错误。特别是在涉及var、let、const以及函数声明和表达式时,预编译机制显得尤为重要。
相关文章:
JS中关于预编译的【关键知识点】总结
在JavaScript中,预编译(hoisting)是指在代码执行之前,JavaScript引擎会首先对代码进行扫描,将所有的变量声明和函数声明提升到代码的最顶部。这一过程使得我们在代码中可以在声明之前使用变量和函数。理解预编译对于深…...
Elasticsearch 映射(mapping)
概念 在 Elasticsearch 中,映射(Mapping)定义了索引中字段的类型和属性。它是索引数据结构的基础,类似于传统数据库中的表结构定义。映射不仅定义了字段的类型(如 text、keyword、integer 等)…...
开放式耳机更适合运动的时候使用?开放式耳机推荐指南
开放式耳机确实非常适合运动时使用,原因主要有以下几点。 首先,保持对外界的感知是很重要的一点。在运动的时候,我们需要听到周围的环境声音,比如车辆的行驶声、行人的呼喊等,以便及时做出反应,保证自身安全…...
食堂窗口自助点餐小程序的设计
管理员账户功能包括:系统首页,个人中心,用户管理,商家管理,店铺信息管理,菜品分类管理,菜品信息管理,订单管理,系统管理 微信端账号功能包括:系统首页&#…...
请说出路由传参和获取参数的三种方式
在Vue.js中使用Vue Router进行路由管理时,传递和获取参数是常见的需求。这里介绍三种主要的路由传参和获取参数的方式: 1. 通过URL的查询参数(Query Parameters) 传递参数: 当你需要传递一些非敏感数据(…...
精准防控,高效管理:AI智能分析网关V4区域未停留检测算法的介绍及应用
一、区域未停留AI检测算法概述 随着人工智能和计算机视觉技术的飞速发展,区域未停留AI检测算法作为一种重要的视频分析技术,逐渐在各个领域得到广泛应用。该算法通过高效处理视频流数据,能够实时分析并判断目标对象是否在预设区域内有足够的…...
html+css練習:iconfont使用
1.網址地址:https://www.iconfont.cn/search/index 2.註冊登錄,將需要的圖標添加到購物車 3.下載代碼 4.下載后的代碼有一個html頁面,裡面有詳細的使用方式...
算法导论 总结索引 | 第五部分 第二十一章:用于不相交集合的数据结构
一些应用涉及 将n个不同的元素分成一组不相交的集合。寻找包含给定元素的唯一集合 和 合并两个集合 1、不相交集合的操作 1、一个不相交集合 数据结构 维持了 一个不相交动态集的集合 S {S_1, S_2,…, S_n}。用一个代表 来标识每个集合,它是这个集合的某个成员。…...
【单例设计模式】揭秘单例模式:从原理到实战的全方位解析(开发者必读)
文章目录 深入理解单例设计模式:原理、实现与最佳实践引言第一部分:设计模式简介第二部分:单例模式定义第三部分:单例模式的优点和缺点第四部分:单例模式的实现方式懒汉式非线程安全的实现线程安全的实现(双…...
VTK8.2.0编译(Qt 5.14.2+VS2017)
VTK8.2.0编译(Qt 5.14.2VS2017) 关于Qt和MSVC的安装,可以参考文章(QtMSVC2017)。 本篇VTK在QtMSVC的配置下的编译。VTK 以8.2.0为例。 一、环境变量的配置 我们打开电脑的环境变量,可以看到没有Qt相关的…...
武汉流星汇聚:亚马逊跨境电商龙头,市场份额稳固,服务品质卓越
在全球跨境电商的版图上,亚马逊无疑是一颗璀璨的明星,以其庞大的市场规模、卓越的用户体验和强大的品牌影响力,稳居行业龙头地位。即便在诸多新兴跨境平台竞相崛起的背景下,亚马逊依然以其独特的优势,保持着难以撼动的…...
我出一道面试题,看看你能拿 3k 还是 30k!
大家好,我是程序员鱼皮。欢迎屏幕前的各位来到今天的模拟面试现场,接下来我会出一道经典的后端面试题,你只需要进行 4 个简单的选择,就能判断出来你的水平是新手(3k)、初级(10k)、中…...
opecv c++计算图像的曲率
公式 κ z x x ⋅ z y 2 − 2 ⋅ z x ⋅ z y ⋅ z x y z y y ⋅ z x 2 ( z x 2 z y 2 1 ) 3 / 2 \kappa \frac{z_{xx} \cdot z_y^2 - 2 \cdot z_x \cdot z_y \cdot z_{xy} z_{yy} \cdot z_x^2}{(z_x^2 z_y^2 1)^{3/2}}\newline κ(zx2zy21)3/2zxx⋅zy2−2⋅zx…...
鸿蒙 IM 即时通讯开发实践,融云 IM HarmonyOS NEXT 版
融云完成针对“纯血鸿蒙”操作系统的 SDK 研发,HarmonyOS NEXT 版融云 IM SDK 已上线,开发者可在“鸿蒙生态伙伴 SDK 市场”查询使用。 发挥 20 年通信行业技术积累和领创品牌效应,融云为社交、娱乐、游戏、电商、出行、医疗等各行业提供专业…...
【全国大学生电子设计竞赛】2022年D题
🥰🥰全国大学生电子设计大赛学习资料专栏已开启,限时免费,速速收藏~...
【优秀python案例】基于python爬虫的深圳房价数据分析与可视化实现
现如今,房价问题一直处于风口浪尖,房价的上涨抑或下跌都牵动着整个社会的利益,即便是政府出台各种政策方针也只能是暂时抑制楼市的涨势,对于需要买房的人来说,除了关注这些变化和政策外,还有一个非常头疼的…...
vscode安装与配置本地c/c++编译调试环境
目录 (1)安装vscode和常用插件 1.下载安装vscode 2.安装常用插件 (2)本地安装和配置编译器 1.安装编译器 2.vscode配置编译器 第1种:全局配置 第2种:为当前项目个性化配置 (3ÿ…...
PCIe学习笔记(15)
设备就绪状态 (Device Readiness Status,DRS)消息 (Device Readiness Status (DRS) 是PCIe规范中引入的一种机制,旨在改进设备初始化和就绪状态的检测与报告。 在以往的PCIe版本中,系统通常依赖于固定的超时机制来判断设备是否已…...
Rust中的特殊类型所占的内存大小
可以使用std::mem:size_of获取类型大小: use std::mem::size_of;struct Journal(String, u32); trait Summary {} impl Summary for Journal {}fn main() {println!("普通结构体相关:");println!("{}", size_of::<&Journal&…...
【深度学习】变分自编码器 VAE,什么是变分?(1)
文章目录 1. 变分自编码器 VAEVAE的基本概念VAE的数学原理编码器解码器目标函数训练过程代码示例未来发展2. 变分推断变分推断(Variational Inference)变分推断的基本概念变分推断的目标变分下界(Evidence Lower Bound, ELBO)最大化变分下界变分推断的步骤3. 必读内容1. 变…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
