提升(Hoisting)和暂时死区(TDZ)在实践中的应用

变量提升

● 首先我们先声明三个变量,并在声明之前去使用这个变量

console.log(me);
console.log(job);
console.log(year);var me = 'IT知识一享';
let job = 'teacher';
const year = 1991;

在这里插入图片描述

使用var声明变量,变量声明会被提升到作用域的顶部,但是变量赋值不会。向let和const的变量就处于暂时死区

函数的提升

● 现在我们首先创建一个函数,用三种不同的方式

function addDecl(a, b) {return a + b;
}const addExpr = function (a, b) {return a + b;
};const addArrow = (a, b) => a + b;

● 接着我们直接调用它

console.log(addDecl(2, 8));function addDecl(a, b) {return a + b;
}const addExpr = function (a, b) {return a + b;
};const addArrow = (a, b) => a + b;

在这里插入图片描述

● 接着调用表达式的函数

console.log(addDecl(2, 8));
console.log(addExpr(2, 8));function addDecl(a, b) {return a + b;
}const addExpr = function (a, b) {return a + b;
};const addArrow = (a, b) => a + b;

在这里插入图片描述

这是因为在函数表达式中,函数仅仅是变量addExpr的一个值,和变量提升一样,无法在他之前去调用它!

● 接着调用箭头函数

console.log(addDecl(2, 8));
// console.log(addExpr(2, 8));
console.log(addArrow(2, 8));function addDecl(a, b) {return a + b;
}const addExpr = function (a, b) {return a + b;
};const addArrow = (a, b) => a + b;

结果和函数表达式的结果一样,原因也和函数表达式的原因一样!addDecl和addExpr处于暂时死区!

● 那如果我们把函数表达式和箭头函数改变为var去声明呢?

var addArrow = (a, b) => a + b;

在这里插入图片描述

仔细看这个报错,和之前的不一样,原因是var的函数声明会被提升,但是变量赋值并不会,所以当我们使用console.log(addArrow(2, 8));去调用它的时候,addArrow的这个函数并不存在,程序更不会去识别它是一个函数!函数表达式也是同样的道理!

window全局对象

var x = 1;
let y = 2;
const z = 3;

在浏览器环境下,JavaScript提供了window对象,它代表了浏览器的窗口或标签页。window对象是全局对象,在浏览器环境中的任何地方都可以直接访问它。
● 我们可以在控制台上输入window,在直接调用它
在这里插入图片描述
在这里插入图片描述

我们发现用var声明的变量可以在window全局对象中找到,而用let和const声明的对象则找不到!
● 我们也可以用代码去验证一下

var x = 1;
let y = 2;
const z = 3;console.log(x === window.x);
console.log(y === window.y);
console.log(z === window.z);

在这里插入图片描述

举例

● 假设现在我们是一个电子商务公司,现在需要实现一个功能,可以删除所有的产品。我们用函数来简单的表示

function deleteShoppingCart() {console.log('All products deleted!');
}

● 但是首先我们要确定现在商品的数量,假设为10,我们把它放入一个变量中

var numProducts = 10;function deleteShoppingCart() {console.log('All products deleted!');
}

● 现在我们要去判断,如果有商品的话,我们需要去确认一下是否删除,因为删除所有是一个非常危险的操作,我们用if去实现一下

if(!numProducts) deleteShoppingCart(); var numProducts = 10;function deleteShoppingCart() {console.log('All products deleted!');
}

注:10在布尔类型中为ture,!就是flase,不执行删除操作,看似代码好像没有什么问题
在这里插入图片描述

注:但是还是进行了删除的操作!为什么?因为if中的numProducts值用var在后面声明的,变量赋值并没有被提升,故if中的numProducts为undefined,布尔值为flase,!取反就是为true,所以还是执行了后面的函数代码!

最佳实践:

  1. 变量的声明尽量使用const,不要使用var,以免会有意外的发生;
  2. 变量声明放在代码的顶部,这样也是不违背常理的,也比较好看;
  3. 虽然函数声明的方式可以在前面调用,但是仍然不推荐在函数声明去调用函数;

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

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

相关文章

EasyExcel实现动态表头功能

EasyExcel实现动态表头功能 开发过程中,大部分都会使用到导出报表功能,目前阶段会用得有 poi导出(暂无), easyexcel导出(官方文档,https://easyexcel.opensource.alibaba.com/docs/current/&am…

【C++】特殊类设计+类型转换+IO流

🌇个人主页:平凡的小苏 📚学习格言:命运给你一个低的起点,是想看你精彩的翻盘,而不是让你自甘堕落,脚下的路虽然难走,但我还能走,比起向阳而生,我更想尝试逆风…

前端解决跨域 3 种方法 -对接读卡器时出现跨域问题

目录 背景概述实现中遇到的问题解决方法1 - 反向代理方法2 - JSONP实现1实现2 借助jQuery(我用的) 方法3 - 原生请求方法4 - 接口请求时请求头解决跨域 背景概述 开发过程中对接读卡器硬件时,和C工程师对接,C工程师写了一个程序&a…

Tomcat的HTTP Connector

https://tomcat.apache.org/tomcat-10.1-doc/config/http.html 一个Connector代表一个接收请求、返回响应的端点(endpoint)。 HTTP Connector 元素代表一个支持HTTP/1.1的Connector组件。一个这样的组件在服务端一个指定的TCP端口上监听连接。一个Serv…

IC - 基础知识 - SOC与MCU

说明 工作中有涉及到SOC和MCU,非嵌入式专业,对两个概念理解不是很清晰。 共同点 MCU和SOC是两种常见的集成电路 (IC) 设计形式,它们的区别在于它们的设计目的和应用场景。工作中将MCU和SOC都称为IC也是没问题的,但是专业人员会…

excel 导出 单元格换行

1、使用setWrapText方法来设置单元格的自动换行:style.setWrapText(true); 2、使用\n来表示换行 import java.io.FileOutputStream; import java.io.IOException;public class ExcelExporter {public static void main(String[] args) throws IOException {// 创…

json字符串属性名与实体类字段名转换

在项目开发过程中,会遇到实体类字段名与交互的json对象属性名不一致的情况,比如前段使用的是下划线方式定义,后端采用的是驼峰式定义,其他系统使用t表示一个时间戳,自己的系统使用timestamp定义。遇到这种情况&#xf…

学习笔记:根号分治(优雅的暴力)

文章目录 根号分治例题选讲哈希冲突Time to Raid Cowavans[ARC150B] Make Divisible无向图三元环计数雅加达的摩天轮[ABC259Ex] Yet Another Path Counting 根号分治 根号分治,与其说是一种算法,更不如说是一种 思想。它是将问题按照不同的数据规模划分&…

c语言实现http下载功能,显示进度条和下载速率

#include <stdio.h>//printf #include <string.h>//字符串处理 #include <sys/socket.h>//套接字 #include <arpa/inet.h>//ip地址处理 #include <fcntl.h>//open系统调用 #include <unistd.h>//write系统调用 #include <netdb.h>//…

SHAP 和 LIME 解释模型

内容大纲 1、SHAP 解释器1.1 案例&#xff1a;用于预测患者肺癌1.2 案例中使用的shap解释器1.3 举例说明&#xff1a;SHAP工作原理 2、LIME 解释器2.1 案例&#xff1a;判断法律案件胜诉可能性2.2 LIME解释器工作原理2.3 本地解释模型的训练过程2.4 举例说明1&#xff1a;新闻分…

机器学习实战:基于sklearn的工业蒸汽量预测

文章目录 写在前面工业蒸汽量预测1.基础代码2.模型训练3.模型正则化4.模型交叉验证5.模型超参空间及调参6.学习曲线和验证曲线 写在后面 写在前面 本期内容&#xff1a;基于机器学习的工业蒸汽量预测 实验环境&#xff1a; anaconda python sklearn 注&#xff1a;本专栏内所有…

K8s学习笔记——认识理解篇

1. K8s诞生背景 回顾应用的部署&#xff0c;经历了以下几个阶段&#xff1a; 传统部署&#xff1a;物理服务器上运行应用程序。虚拟机部署&#xff1a;物理服务器上安装虚拟机&#xff0c;在虚拟机上运行应用程序。容器部署&#xff1a;物理服务器上安装容器运行时&#xff0…

YB4554是一款经济高效、完全集成的高端输入电压单电池锂离子电池充电器。

YB4554 带OVP保护的高输入电压充电器 概述&#xff1a; YB4554是一款经济高效、完全集成的高端输入电压单电池锂离子电池充电器。这个充电器使用锂离子要求的CC/CV充电模式电池充电器可接受高达24V&#xff0c;但当输入电压超过OVP阈值&#xff0c;通常为6.8V&#xff0c;以防…

antdv使用a-cascader联级选择器实现自定义浮层样式

一般的使用组件库想要自定义样式都会使用深度选择器deep去实现 但是有的组件不管是deep还是!important还是写行内样式都改不掉 这里主要讲使用a-cascader联级选择器的浮层改变样式 一&#xff0c;使用组件 <a-cascader:options"regionOptions"change-on-selectv…

30道高频Vue面试题快问快答

面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过程中&#xff0c;面试官通常会使用快问快答的方式来快速评估面试者的基础知识、思维能力和反应速度。 这种情景下&#xff0c;面试官会提出一系列简短的问题&#xff0c;并期望面试者能够迅速做出回答或提供简洁明…

基于STM32+华为云IOT设计的火灾感知系统

一、设计需求 【1】 项目背景 随着城市化进程的加快和人们生活水平的提高,火灾事故频繁发生,给人们的生命财产安全带来巨大威胁。因此,开发一种可靠的火灾感知系统对于预防和减少火灾事故具有重要意义。近年来,随着物联网技术的发展,基于物联网的火灾感知系统逐渐成为研…

云计算实战项目之---学之思在线考试系统

简介&#xff1a; 学之思开源考试系统是一款 java vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。支持web端和微信小程序&#xff0c;能覆盖到pc机和手机等设备。 支持多种部署方式&#xff1a;集成部署、前后端分离部署、docker部…

初识rust

调试下rust 的执行流程 参考&#xff1a; 认识 Cargo - Rust语言圣经(Rust Course) 新建一个hello world 程序&#xff1a; fn main() {println!("Hello, world!"); }用IDA 打开exe&#xff0c;并加载符号&#xff1a; 根据字符串找到主程序入口&#xff1a; 双击…

SpringCloud 微服务全栈体系(十二)

第十一章 分布式搜索引擎 elasticsearch 一、初识 elasticsearch 1. 了解 ES 1.1 elasticsearch 的作用 elasticsearch 是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在 GitHub 搜…

【安全】Java幂等性校验解决重复点击(6种实现方式)

目录 一、简介1.1 什么是幂等&#xff1f;1.2 为什么需要幂等性&#xff1f;1.3 接口超时&#xff0c;应该如何处理&#xff1f;1.4 幂等性对系统的影响 二、Restful API 接口的幂等性三、实现方式3.1 数据库层面&#xff0c;主键/唯一索引冲突3.2 数据库层面&#xff0c;乐观锁…