【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 实用工具类Spring 的 AnnotationUtils详解

《Java实用工具类Spring的AnnotationUtils详解》Spring框架提供了一个强大的注解工具类org.springframework.core.annotation.Annot... 目录前言一、AnnotationUtils 的常用方法二、常见应用场景三、与 JDK 原生注解 API 的

Java controller接口出入参时间序列化转换操作方法(两种)

《Javacontroller接口出入参时间序列化转换操作方法(两种)》:本文主要介绍Javacontroller接口出入参时间序列化转换操作方法,本文给大家列举两种简单方法,感兴趣的朋友一起看... 目录方式一、使用注解方式二、统一配置场景:在controller编写的接口,在前后端交互过程中一般都会涉及

Java中的StringBuilder之如何高效构建字符串

《Java中的StringBuilder之如何高效构建字符串》本文将深入浅出地介绍StringBuilder的使用方法、性能优势以及相关字符串处理技术,结合代码示例帮助读者更好地理解和应用,希望对大家... 目录关键点什么是 StringBuilder?为什么需要 StringBuilder?如何使用 St

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格

Java并发编程之如何优雅关闭钩子Shutdown Hook

《Java并发编程之如何优雅关闭钩子ShutdownHook》这篇文章主要为大家详细介绍了Java如何实现优雅关闭钩子ShutdownHook,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 目录关闭钩子简介关闭钩子应用场景数据库连接实战演示使用关闭钩子的注意事项开源框架中的关闭钩子机制1.

Maven中引入 springboot 相关依赖的方式(最新推荐)

《Maven中引入springboot相关依赖的方式(最新推荐)》:本文主要介绍Maven中引入springboot相关依赖的方式(最新推荐),本文给大家介绍的非常详细,对大家的学习或工作具有... 目录Maven中引入 springboot 相关依赖的方式1. 不使用版本管理(不推荐)2、使用版本管理(推

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll