【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数组初始化的五种方式

《Java数组初始化的五种方式》数组是Java中最基础且常用的数据结构之一,其初始化方式多样且各具特点,本文详细讲解Java数组初始化的五种方式,分析其适用场景、优劣势对比及注意事项,帮助避免常见陷阱... 目录1. 静态初始化:简洁但固定代码示例核心特点适用场景注意事项2. 动态初始化:灵活但需手动管理代

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码(一)pom.

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解:2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析