什么是变量提升?(形象的比喻)

当然!可以用几个生活中的比喻来形象地解释变量提升:


​1. 书架的占位符​
想象你有一个书架,但还没放书。
• 变量提升(var):

你先在书架上贴了一个标签(比如写“我的书”),但暂时没放书。别人看到标签会问:“这里有什么书?”你回答:“还没有书(undefined)。”
等你后来放了一本书(赋值),别人才能拿到。

 

javascript

复制

console.log(我的书); // 输出 "undefined"(标签存在,但没书)
var 我的书 = "JavaScript指南"; 

let/const的暂时性死区:

你同样贴了标签,但告诉别人:“这里还没准备好,别碰!”(报错)。直到你放书后,别人才能看。

 

javascript

复制

console.log(我的书); // 报错:"标签存在,但禁止访问!"
let 我的书 = "JavaScript指南";

​2. 建筑工地的水泥地基​
盖楼时,先打地基(声明变量),但还没建楼层(赋值)。
var

地基已经打好,但楼板还没铺。你踩上去会掉下去(得到undefined)。
let/const

地基打了,但围了警戒线(暂时性死区)。你提前踩进去会摔跤(报错)。

 

javascript

复制

console.log(楼层); // 掉下去(undefined)
var 楼层 = 3; console.log(楼层); // 摔跤(报错)
let 楼层 = 3;

​3. 行李箱的打包顺序​
你整理行李时:
var

先写了个行李标签(声明变量),但包里还没装东西。别人打开行李箱时看到标签,但里面是空的(undefined)。
let/const

标签贴了,但强行打开行李箱会锁住(报错)。必须等装好东西(赋值)才能查看。

 

javascript

复制

console.log(牙刷); // 空标签(undefined)
var 牙刷 = "软毛"; console.log(牙刷); // 锁住行李箱(报错)
let 牙刷 = "软毛";

​4. 函数声明像“现成的快递”​
函数声明会被整体提升,就像网购了一件商品,直接送到你家(可以直接用):

 

javascript

复制

快递(); // 收到包裹,直接拆开用
function 快递() { console.log("商品到了!"); 
}

而函数表达式(如箭头函数)像“需要组装的家具”:

 

javascript

复制

快递(); // 报错:“零件还没到!”
var 快递 = () => { console.log("商品到了!"); 
};

​总结比喻​
• 变量提升:像“占位符”或“未完成的快递”,声明存在但内容未就绪。

var:占位符允许你查看(得到undefined)。

let/const:占位符禁止查看(报错),直到赋值完成。

• 函数声明:像“现成的礼物”,直接可用。

通过这些比喻,是不是更容易理解变量提升的“时间差”和不同声明方式的区别? 😊

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

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

相关文章

C++面向对象编程入门:从类与对象说起(一)

C语言是面向过程,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题,而C面向的是对象,关注的是对象,将一件事拆解成多个对象,靠对象之间互交完成。 目录 类的定义 类的两种定义 …

uniapp tabBar 中设置“custom“: true 在H5和app中无效解决办法

uniapp小程序自定义底部tabbar,但是在转成H5和app时发现"custom": true 无效,原生tabbar会显示出来 解决办法如下 在tabbar的list中设置 “visible”:false 代码如下:"tabBar": {"custom": true,//"cust…

SpringBoot学生操行评分系统源码设计开发

概述 基于SpringBoot框架开发的学生操行评分系统完整项目,该系统采用主流技术栈开发,包含完善的评分管理功能模块,是学校管理、教育培训机构理想的数字化解决方案,非常适合作为设计参考或二次开发基础项目。 主要内容 5.1 管理…

从代码学习深度学习 - 单发多框检测(SSD)PyTorch版

文章目录 前言工具函数数据处理工具 (`utils_for_data.py`)训练工具 (`utils_for_train.py`)检测相关工具 (`utils_for_detection.py`)可视化工具 (`utils_for_huitu.py`)模型类别预测层边界框预测层连接多尺度预测高和宽减半块基础网络块完整的模型训练模型读取数据集和初始化…

基于STM32的温湿度光照强度仿真设计(Proteus仿真+程序设计+设计报告+讲解视频)

这里写目录标题 **1.****主要功能****2.仿真设计****3.程序设计****4.设计报告****5.下载链接** 基于STM32的温湿度光照强度仿真设计(Proteus仿真程序设计设计报告讲解视频) 仿真图Proteus 8.9 程序编译器:keil 5 编程语言:C语言 设计编号…

SSH 服务部署指南

本指南涵盖 OpenSSH 服务端的安装、配置密码/公钥/多因素认证,以及连接测试方法。 适用系统:Ubuntu/Debian、CentOS/RHEL 等主流 Linux 发行版。 1. 安装 SSH 服务端 Ubuntu/Debian # 更新软件包索引 sudo apt update# 安装 OpenSSH 服务端 sudo apt i…

《Python星球日记》 第46天:决策树与随机森林

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏:《Python星球日记》,限时特价订阅中ing 目录 一、前言二、决策树算法原理1. 决策树简介2. 决策树的分裂准则(1) 信息熵与信息增益(2) 基尼不纯…

Vue2:引入公共JS,通过this调用

tools.js // 图片加上前缀 baseurl 是请求域名 img 是图片路径export function getimgurl(img) {return ${this.$baseurl}${img}}main.js import baseUrl from "/api/baseUrl.js" Vue.prototype.$baseurl baseUrlimport {getimgurl} from /api/tool.js; Vue.protot…

【Hot 100】 146. LRU 缓存

目录 引言LRU 缓存官方解题LRU实现📌 实现步骤分解步骤 1:定义双向链表节点步骤 2:创建伪头尾节点(关键设计)步骤 3:实现链表基础操作操作 1:添加节点到头部操作 2:移除任意节点 步骤…

【Linux】swap交换分区管理

目录 一、Swap 交换分区的功能 二、swap 交换分区的典型大小的设置 2.1 查看交换分区的大小 2.1.1 free 2.1.2 cat /proc/swaps 或 swapon -s 2.1.3 top 三、使用交换分区的整体流程 3.1 案例一 3.2 案例二 一、Swap 交换分区的功能 计算机运行一个程序首先会将外存&am…

【计算机网络】用户从输入网址到网页显示,期间发生了什么?

1.URL解析 浏览器分解URL:https://www.example.com/page 协议:https域名:www.example.com路径:/page 2.DNS查询: 浏览器向DNS服务器发送查询请求,将域名解析为对应的IP地址。 3.CDN检查(如果有)&#…

架空输电线巡检机器人轨迹优化设计

架空输电线巡检机器人轨迹优化 摘要 本论文针对架空输电线巡检机器人的轨迹优化问题展开研究,综合考虑输电线复杂环境、机器人运动特性及巡检任务需求,结合路径规划算法、智能优化算法与机器人动力学约束,构建了多目标轨迹优化模型。通过改进遗传算法与模拟退火算法,有效…

根据窗口大小自动调整页面缩放比例,并保持居中显示

vue 项目 直接上代码 图片u1.png 是个背景图片 图片u2.png 是个遮罩 <template><div id"app"><div class"viewBox"><divclass"screen":style"{ transform: translate(-50%,-50%…

初学Python爬虫

文章目录 前言一、 爬虫的初识1.1 什么是爬虫1.2 爬虫的核心1.3 爬虫的用途1.4 爬虫分类1.5 爬虫带来的风险1.6. 反爬手段1.7 爬虫网络请求1.8 爬虫基本流程 二、urllib库初识2.1 http和https协议2.2 编码解码的使用2.3 urllib的基本使用2.4 一个类型六个方法2.5 下载网页数据2…

oracle 数据库sql 语句处理过程

14.1SQL语句处理过程 在进行SQL语句处理优化前&#xff0c;需要先熟悉和了解SQL语句的处理过程。 每种类型的语句在执行时都需要如下阶段&#xff1a; 第1步: 创建游标。 第2步: 分析语句。 第5步: 绑定变量。 第7步: t运行语句。 第9步: 关闭游标。 如果使用了并行功能&#x…

pm2 list查询服务时如何通过name或者namespace进行区分

在 PM2 中&#xff0c;如果 pm2 list 显示的所有服务名称&#xff08;name&#xff09;相同&#xff0c;就无法直观地区分不同的进程。这时可以通过 --namespace&#xff08;命名空间&#xff09; 或 自定义 name 来区分服务。以下是解决方案&#xff1a; 方法 1&#xff1a;启…

[python] 函数基础

二 函数参数 2.1 必备参数(位置参数) 含义: 传递和定义参数的顺序及个数必须一致 格式: def func(a,b) def func_1(id,passwd):print("id ",id)print("passwd ",passwd) func_1(10086,123456) 2.2 默认参数 函数: 为函数的参数提供一个默认值,如果调…

超大规模SoC后仿真流程与优化

在超大规模SoC设计中,是否需要进行全芯片后仿真(Full-Chip Post-layout Simulation)取决于多个因素,包括设计复杂度、项目风险、资源限制以及验证目标。以下是针对这一问题的系统性分析: 1. 全芯片后仿真的必要性 需要全芯片后仿真的场景 系统级交互验证: 跨模块信号交互…

深入理解 Docker 网络原理:构建高效、灵活的容器网络

在现代软件开发中&#xff0c;Docker 已经成为了容器化技术的代名词&#xff0c;广泛应用于开发、测试和生产环境。Docker 使得开发者能够将应用及其依赖打包成一个轻量级的容器&#xff0c;并通过 Docker 容器化技术来实现高效的部署与管理。 然而&#xff0c;在日常使用 Dock…

leetcode 242. Valid Anagram

题目描述 因为s和t仅仅包含小写字母&#xff0c;所以可以开一个26个元素的数组用来做哈希表。不过如果是unicode字符&#xff0c;那就用编程语言自带的哈希表。 class Solution { public:bool isAnagram(string s, string t) {int n s.size();if(s.size() ! t.size())return …