【JavaScript】let与var的区别及变量、函数提升

2024-09-07 23:08

本文主要是介绍【JavaScript】let与var的区别及变量、函数提升,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

有var与无var的区别

  在函数内部,有var和没var声明的变量是不一样的。有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口。


let与var的区别

这里写图片描述

  在上面代码中,我们使用var语句声明变量x。因此,变量x的范围是函数范围。if语句内的变量x就是if语句外创建的变量x。因此,在你修改if语句块内变量x的值的时候,也会修改函数中变量x的所有引用的值。
  
  为了避免这种情况,我们需要使用块级作用域,let语句允许你创建块级作用域的局部变量。
  
  修改上面的代码片段,使用let语句声明变量:
  
  这里写图片描述

  在上面的代码中,我们使用let语句声明块级作用域的局部变量x。因此,在if语句内更新变量x的值不会影响if语句外的变量x的值。


变量提升

  使用 let 声明的变量没有变量提升,这意味着使用let声明的变量不会移动到执行上下文的顶部。
  
这里写图片描述

  上图中获得x时不会报错是因为变量提升,而用let语句声明的y报错ReferenceError是因为不会提升到执行上下文之上。


函数提升

在JavaScript中,可以通过两种方式来创建函数:
  1)作为声明而创建的函数
  2)作为表达式而创建的函数

  作为声明或语句创建的函数作为一个整体提升到执行上下文的顶部。但是,作为表达式创建的函数会像变量一样提升。
  
这里写图片描述

  上图中第一个例子在函数创建之前使用函数,会得到hello的输出,是因为作为语句创建的函数会当做一个整体被提升到执行上下文的顶部。

function foo1(){console.log("hello")};
foo1();  // helo

  第二个例子在函数创建foo2作为表达式时,因为JavaScript会像普通变量一样提升它,然而foo2中的函数赋值发生在函数中,也就是创建作为表达式函数的地方,所以当尝试执行时会这样执行:

var foo2;
foo2(); // foo2 is not a function

综上,

  • 函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。
  • 函数表达式在创建之前不能使用。只有声明部分会被提升,赋值发生在创建函数的那一行。

重新声明变量

  同一个函数或块中使用 var 重新声明一个变量时不会报错。

  这里写图片描述
  
  同一个函数或块中使用 let 重新声明一个变量时会出现语法错误。 
  
  这里写图片描述


暂时性死区

  使用 let 声明的变量会导致暂时性死区。
  在下面代码中,let x = x+6 将抛出x未定义的异常。
  之所以会出现这个错误,是因为表达式(x+6)求得是if块范围内局部变量x的值,而不是函数范围内局部变量x的值。

这里写图片描述

这篇关于【JavaScript】let与var的区别及变量、函数提升的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146420

相关文章

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码(Binary-Coded Decima

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试:定位变量错误性能分

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

C++统计函数执行时间的最佳实践

《C++统计函数执行时间的最佳实践》在软件开发过程中,性能分析是优化程序的重要环节,了解函数的执行时间分布对于识别性能瓶颈至关重要,本文将分享一个C++函数执行时间统计工具,希望对大家有所帮助... 目录前言工具特性核心设计1. 数据结构设计2. 单例模式管理器3. RAII自动计时使用方法基本用法高级用法

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo