一个不一样的声音,让我对 let 产生了新的认识

460 阅读2分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

小伙伴们好,我是 飘雪的季节 ,一名 误入前端 而 不能自拔 的程序媛

从 jquery 到 vue,从 es5 到 es6 再到 es7,从刚入行时的依赖百度 到 现在的依赖谷歌;6年的前端学习生涯,跌跌撞撞中依旧没有放弃,自认为对变量定义已经很了解了,就 var 全局定义变量, let 块级作用域定义变量,const 定义常量;这么简单的东西,就是刚入行一个月的小伙伴,相信也都会用的非常顺手的。

可就是这么一个上手容易使用简单的 let ,却让我深深地怀疑自己莫不是当了好多年的假前端 ??????

是这么回事儿,就是在今天,有一个不一样的声音告诉我,let不是我想的那么回事儿,还给我列举了好多例子;不服气,作为一个工作多年的前端爱好者,怎么能忍呢,必须找证据回怼 !!!!!!

我开始满网络搜索资料,把压箱底的传家宝 —— javascript 相关的书籍 📚 ,全部都找出来了,挨个翻,相互佐证,再加上案例输出;

结果发现 let 竟然真的存在变量提升 !!!!!!

那一刻,好佩服广大小伙伴们对技术的深入探索 !!!!!!

从变量的声明到赋值再到引用的过程中

通过 var 声明的变量,其 创建赋值 都被提升到了其 被引用的代码行 之前;在其被引用之前如果没有显性地给变量赋值,程序就会给其赋值 undefined,这时如果去打印的话,就会输出 undefined。

而通过 let 声明的变量,只有其 创建 被提升到了其 被引用的代码行 之前;在其被引用之前如果没有显性地给变量赋值,程序是不会给其初始化赋值的,这时如果去打印的话,就会报在初始化赋值之前不能够引用该变量的语法错误;这也是为什么会存在暂时性死区的原因。

鉴于 let 是有块级作用域的,所以暂时性死区也只是存在于其块级作用域内,同时其创建的提升也只是提升到了其块级作用域内部开始的位置;在块级作用域之外去打印的话,是会报变量未定义的错误的。

⚠️⚠️⚠️ 注意呦 ⚠️⚠️⚠️ —— 很多书上都会指明 let 不存在变量提升 ,也不能说它错,只不过这里的不存在变量提升是 基于变量的赋值 是否被提升而言的;而 基于变量的创建 而言的话,let 是 存在变量提升 的。

换个角度看问题,会得到意想不到的收获 !!!!!!