提升(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流

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

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>//…

机器学习实战:基于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;并期望面试者能够迅速做出回答或提供简洁明…

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

简介&#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;乐观锁…

亚马逊云科技产品测评』活动征文|通过使用Amazon Neptune来预测电影类型初体验

文章目录 福利来袭Amazon Neptune什么是图数据库为什么要使用图数据库什么是Amazon NeptuneNeptune 的特点 快速入门环境搭建notebook 图神经网络快速构建加载数据配置端点Gremlin 查询清理 删除环境S3 存储桶删除 授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转…

chatgpt升级啦,训练数据时间更新到2023年4月,支持tools(升级functionCall),128k上下文

&#xff08;2023年11月7日&#xff09; gpt-4-1106-preview https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo 训练数据日期升级到2023年四月 上线文增加到128k 调用一次chatgpt接口&#xff0c;可以得到多次函数调用 import OpenAI from "openai"…

水利部加快推进小型水库除险加固,大坝安全监测是重点

国务院常务会议明确到2025年前&#xff0c;完成新出现病险水库的除险加固&#xff0c;配套完善重点小型水库雨水情和安全监测设施&#xff0c;实现水库安全鉴定和除险加固常态化。 为加快推进小型水库除险加固前期工作&#xff0c;水利部协调财政部提前下达了2023年度中央补助…

网络流量分类概述

1. 什么是网络流量&#xff1f; 一条网络流量是指在一段特定的时间间隔之内&#xff0c;通过网络中某一个观测点的所有具有相同五元组(源IP地址、目的IP地址、传输层协议、源端口和目的端口)的分组的集合。 比如(10.134.113.77&#xff0c;47.98.43.47&#xff0c;TLSv1.2&…

YOLOv8-Pose推理详解及部署实现

目录 前言一、YOLOv8-Pose推理(Python)1. YOLOv8-Pose预测2. YOLOv8-Pose预处理3. YOLOv8-Pose后处理4. YOLOv8-Pose推理 二、YOLOv8-Pose推理(C)1. ONNX导出2. YOLOv8-Pose预处理3. YOLOv8-Pose后处理4. YOLOv8-Pose推理 三、YOLOv8-Pose部署1. 源码下载2. 环境配置2.1 配置CM…

web前端js基础------制作滚动图片

1&#xff0c;要求 通过定时器使其出现滚动的效果 可以通过按键控制图片滚动的方向&#xff08;设置两个按钮绑定点击事件&#xff09; 当鼠标悬停时图片停止&#xff0c;鼠标离开时图片继续向前滚动&#xff08;可以设置鼠标的悬停和离开事件&#xff09; 参考如下 conten…

揭开堆叠式自动编码器的强大功能

一、介绍 在不断发展的人工智能和机器学习领域&#xff0c;深度学习技术因其处理复杂和高维数据的能力而广受欢迎。在各种深度学习模型中&#xff0c;堆叠式自动编码器是一种多功能且功能强大的工具&#xff0c;可用于特征学习、降维和数据表示。本文探讨了堆叠式自动编码器在深…

【论文阅读】Generating Radiology Reports via Memory-driven Transformer (EMNLP 2020)

资料链接 论文原文&#xff1a;https://arxiv.org/pdf/2010.16056v2.pdf 代码链接&#xff08;含数据集&#xff09;&#xff1a;https://github.com/cuhksz-nlp/R2Gen/ 背景与动机 这篇文章的标题是“Generating Radiology Reports via Memory-driven Transformer”&#xf…