什么是变量提升(hoisting)?它在JavaScript中是如何工作的?

news2024/9/18 10:47:14

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 变量提升(Hoisting)
  • ⭐ 变量提升的示例:
  • ⭐ 写在最后


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅


⭐ 变量提升(Hoisting)

变量提升是 JavaScript 中的一种行为,它指的是在代码执行之前,JavaScript 引擎会将变量和函数声明提升到它们所在作用域的顶部。虽然在代码中,变量和函数的声明通常出现在它们被使用的位置之后,但由于变量提升的存在,它们实际上在代码执行前就已经存在于内存中了。

变量提升是 JavaScript 解释器的一种默认行为,它有助于理解以下几个重要概念:

  1. 声明和初始化:在变量提升阶段,只有声明被提升,而初始化(赋值)仍然留在原来的位置。这意味着变量在被使用之前已经存在,但它们的值是 undefined

  2. 函数声明和函数表达式:函数声明(function declaration)也会被提升,而函数表达式(function expression)不会完全提升,只有函数名会被提升。

  3. 作用域:变量提升是在当前作用域内进行的,所以在不同作用域内声明的变量会在各自的作用域内提升。


⭐ 变量提升的示例:

console.log(x); // 输出:undefined
var x = 10;

在上述示例中,变量 x 被提升到顶部,但它的值在声明之前被访问,因此输出 undefined

foo(); // 输出:Hello, world!
function foo() {
  console.log("Hello, world!");
}

在这个示例中,函数 foo 被完全提升,因此可以在声明之前调用它。

需要注意的是,虽然变量提升在 JavaScript 中是一种默认行为,但最佳实践是在变量使用之前进行声明和初始化,以提高代码的可读性和可维护性。此外,了解变量提升的工作原理有助于避免潜在的错误和误解。


⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

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

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

相关文章

水果成篮(力扣)双指针滑动窗口 JAVA

你正在探访一家农场,农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示,其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而,农场的主人设定了一些严格的规矩,你必须按照要求采摘水果&…

[管理与领导-27]:IT基层管理者 - 团队管理 - 育人 - 如何评估团队的能力?如何培养团队?

目录 一. 培养团队(练兵)为什么很重要 二. 如何评估团队的能力模型 三、培养人才 一. 培养团队(练兵)为什么很重要 培养团队是组织中的一项重要任务,以下是一些说明为什么培养团队是如此重要的原因: 养…

MAC QT开发攻略

文章目录 基础步骤安装QT、QTCreator安装CMakeNinja 安装Clion编译器在QTCreator中新建项目更改CMake生成器 导入Clion CMake生成文件 基础步骤 安装QT、QTCreator 安装CMake 由于clion需要使用cmake构建 Ninja Ninja下载 安装Clion编译器 Clion 2023.1.3 破解版安装教程…

从零注册和搭建搭建uniapp微信小程序项目

03 - 开发环境搭建和项目创建 语雀 目标 什么是小程序拥有小程序开发者账号安装微信开发者工具创建小程序项目使用基本的组件上线一个体验版小程序 什么是小程序 了解小程序,以及小程序开发为什么会成为一门单独的职业。 我们从以下3个视角,来了解一下…

手把手教学——终端工具xshell与文件传输工具xftp使用步骤及详解

前言 xshell是一款常用于连接本地linux服务以及云服务器的终端远程连接工具,该款终端工具常搭配远程文件传输工具xftp一起使用,由于还有很多小伙伴还不知道这两款终端工具的使用流程及步骤,Darren洋在这里给小伙伴们进行详细讲解。 一、下载工…

【Java】对象数组排序(Comparable接口/Comparator接口)

Comparable接口(compareTo) Arrays 类中的 sort 方法承诺可以对对象数组进行排序,但要求满足下列前提:对象所属的类必须实现了 Comparable 接口,且定义了compareTo方法。 Comparable接口的代码 public interface Comp…

无涯教程-TensorFlow - 单词嵌入

Word embedding是从离散对象(如单词)映射到向量和实数的概念,可将离散的输入对象有效地转换为有用的向量。 Word embedding的输入如下所示: blue: (0.01359, 0.00075997, 0.24608, ..., -0.2524, 1.0048, 0.06259) blues: (0.01396, 0.11887, -0.48963, ..., 0.03…

解决Pycharm的Settings中Project不见了也无法选择Python Interpreter的方法

目录 一、问题如下二、解决方法 一、问题如下 突然打开项目没有python解释器,也无法重新配置python Interpreter,而且整个文件夹是黄色高亮的形式,如下显示,而且重新安装了pycharm也没用甚至说打开File–>Setting–>Projec…

网络编程套接字(1)

文章目录 网络编程套接字(1)1. 预备知识1.1 源IP与目的IP1.2 认识端口号1.3 理解 "端口号" 和 "进程ID"1.4 源端口号和目的端口号1.5 认识TCP协议和UDP协议(1) TCP(2) UDP 1.6 网络字节序 2. socket编程接口2.1 socket 常见API2.2 sockaddr结构 网络编程套…

深度学习环境搭建 cuda、模型量化bitsandbytes安装教程 windows、linux

cuda、cudann、conda安装教程 输入以下命令,查看 GPU 支持的最高 CUDA 版本。 nvidia-smi cuda安装(cudatoolkit) 前往 Nvidia 的 CUDA 官网:CUDA Toolkit Archive | NVIDIA Developer CUDA Toolkit 11.8 Downloads | NVIDIA …

react之路由的安装与使用

一、路由安装 路由官网2021.11月初,react-router 更新到 v6 版本。使用最广泛的 v5 版本的使用 npm i react-router-dom5.3.0二、路由使用 2.1 路由的简单使用 第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面 films.js示例代码 export default functio…

IDM最新版2023不限速下载网盘详细操作教程

开启这个开关,让你的浏览器下载速度翻倍!大家有没有听说过IDM下载器,那是因为它的多线程下载功能,所以下载速度快,其实我们的浏览器也有多线程下载功能,只是默认关闭了而已,只需开启它,就可以有…

商城-学习整理-高级-性能压测缓存问题(十一)

目录 一、基本介绍1、性能指标2、JMeter1、JMeter 安装2、JMeter 压测示例1、添加线程组2、添加 HTTP 请求3、添加监听器4、启动压测&查看分析结果 3、JMeter Address Already in use 错误解决 二、性能监控1、jvm 内存模型2、堆3、jconsole 与 jvisualvm1、jvisualvm 能干…

sd-webui安装comfyui扩展

文章目录 导读ComfyUI 环境安装1. 安装相关组件2. 启动sd-webui3. 访问sd-webui 错误信息以及解决办法 导读 这篇文章主要给大家介绍如何在sd-webui中来安装ComfyUI插件 ComfyUI ComfyUI是一个基于节点流程式的stable diffusion的绘图工具,它集成了stable diffus…

第8章:集成学习

个体与集成 同质:相同的基学习器,实现容易,但是很难保证差异性。异质:不同的基学习器,实现复杂,不同模型之间本来就存在差异性,但是很难直接比较不同模型的输出,需要复杂的配准方法。…

【PACS源码】认识PACS的架构和工作流程

(一)PACS系统的组成及架构 PACS系统的基本组成部分包括:数字影像采集、通讯和网络、医学影像存储、医学影像管理、各类工作站五个部分。 而目前PACS系统的软件架构选型上看,主要有C/S和B/S两种形式。 C/S架构,即Client…

iMazing2.17.3免费版苹果传输电脑端文件数据工具

苹果手机在日常使用过程中可能会遇到iPhone内存不足的情况,遇到这种情况很多用户会选择删除照片来节省存储空间,大量删除照片可能会误删重要照片。另外iPhone可能会遇到自动重启、黑屏等故障。手机突然损坏,数据无法导出,此时备份…

判断链表中是否有环

如下图,如何判断链表中存在环路呢? 一种简单的方法描述: 设置两个链表指针p1和p2并指向链表,设置两个记录指针移动次数的变量c1和c2。在循环中,p1每次移动2个位置,c1加2;p1每次移动一个位置&am…

Redis高可用:哨兵机制(Redis Sentinel)详解

目录 1.什么是哨兵机制(Redis Sentinel) 2.哨兵机制基本流程 3.哨兵获取主从服务器信息 4.多个哨兵进行通信 5.主观下线和客观下线 6.哨兵集群的选举 7.新主库的选出 8.故障的转移 9.基于pub/sub机制的客户端事件通知 1.什么是哨兵机制&#xf…

被信息爆炸反噬了,自食恶果

我前两年回答的一个问题,最近频频收到点赞的消息提醒。 然后,我又思考了一下,我感觉信息价值危机随着生成式 AI 的诞生,可能会越来越严重。 什么问题呢? 有人提问: 现在中文互联网能搜索到的有价值信息越来…