let/const 的变量提升与暂时性死区

let/const 的变量提升与暂时性死区在面试或一些文章中提到var和let/const区别时,总说var有变量提升,let/const不存在变量提升,这种说法是错误的.var和let/const都有变量提升,但是let/const暂时性死区的存在要求调用该类变量前必须先经过显式赋值

大家好,又见面了,我是你们的朋友全栈君。

从一道面试题说起

请说出 let,const,var 的区别

大部分的回答是这样的,甚至很多博客中的答案也是这样的:

  1. let/const 提供了块级作用域
  2. let 不能重复定义
  3. var 有变量提升,let / const 没有变量提升

前两条没什么问题,第三条中 var 有变量提升 也是对的,而 let / const 没有变量提升 确是错误的,且有很大的迷惑性。本文就从这一点谈起:

let / const 存在变量提升(hoist)以及它们的暂时性死区(TDZ)

let/const 没有变量提升的错觉

console.log(aVar); // undefined
console.log(aLet); // causes ReferenceError: aLet is not defined
var aVar = 1;
let aLet = 2;

var 与 let 的对比式运行结果,强烈的衬托出 let 似乎没有变量提升,否则为什么会有 aLet is not defined 报错

let/const 变量提升的反例

let x = 'outer value';
(function() { 
   
  console.log(x);
  let x = 'inner value';
}());

为什么说上述例子可以证明 let 会发生变量提升呢

我们先把这个例子修改一下,注释掉 let x = ‘inner value’
在这里插入图片描述
运行程序,会打印出 outer value. 这是因为函数的作用域链. 在闭包内没有找到 x 的定义,沿着函数作用域链寻到外层关于 x 的定义。

接下来我们去掉注释,运行程序在这里插入图片描述
报错,结合上述的例子,可以得出两个结论:

  1. 在闭包内,报错显示:在初始化前不允许读取x (注意报错不是 x not defined)
  2. 在闭包外,并未沿着函数作用域链找到外层 x 的定义.

可见,由于 let x = ‘inner value’ 在闭包作用域内的变量提升,阻断了函数作用域链的向上延伸。但在闭包内部,尽管 x 发生了变量提升,但是在初始化赋值前(before initialization)不允许读取。

这就引出了本文要谈的下一个概念: 暂时性死区 (TDZ)

暂时性死区

Temporal Dead Zone (TDZ) 翻译为中文即为 暂时性死区

先看一段 MDN 上关于暂时性死区的定义

let bindings are created at the top of the (block) scope containing the declaration, commonly referred to as “hoisting”. Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.

文档第一句话就明确指出 let 存在变量提升,但是与 var 不同的是,var 的变量提升的同时会默认赋值为 undefined. 而 let 仅仅发生了提升而已,并不会赋任何值给变量,在显式赋值之前,任何对变量的读写都会导致 ReferenceError 的报错。从代码块(block)起始到变量求值(包括赋值)以前的这块区域,称为该变量的暂时性死区

图示如下:在这里插入图片描述

暂时性死区深入探讨

到目前为止,我们对暂时性死区的理解已经够用了,下面是从 ECMA262 let/const 标准 层面来再稍微深入的探讨一下这个问题。

先看一下文档中关于 let 和 const 的一段描述:
在这里插入图片描述
Lexical Environment:词法环境
Lexical Binding: 词法绑定

试着把文档中的关键句翻译成人话:

The variables are created when their containing Lexical Environment is instantiated…

当程序控制流程运行到特定作用域(scope ≈ Lexical Environment) 时:即模块,函数,或块级作用域。在该作用域中代码真正执行之前,该作用域中定义的 let 和 const 变量会首先被创建出来。正是所谓的变量提升!

…but may not be accessed in any way until the variable’s LexicalBinding is evaluated…

这其实揭示了暂时性死区的原理: 在 let/const 变量被赋值(LexicalBinding)以前是不可以读写的。

If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.

如果 let/const 变量未被显式赋值(Initializer),默认值即为 undefined
在这里插入图片描述

更深入的例子

变量自我赋值

运行失败: 在 let foo = (foo + 55) 所在的 block 作用域中,表达式右侧 foo 的值尚在 TDZ,即没有显式赋值。
在这里插入图片描述

ES6 函数默认参数的 TDZ

运行失败: 函数的参数列表可以看作一个 scope,且参数是从左向右解析的。当 ‘a’ 在赋值时试图获取 ‘b’ 的值,而此时 ‘b’ 出于 TDZ 状态,因此程序报错。
在这里插入图片描述
运行成功: ‘b’ 在赋值时需要获取 ‘a’ 的值,在此之前 ‘a’ 已经被显式赋值为1,不存在 TDZ 的问题。
在这里插入图片描述

总结

var, let/const 都有变量提升,let/const 存在暂存性死区 (TDZ)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149664.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c#二进制文件数据转换base64字符串文本代码

    c#二进制文件数据转换base64字符串文本代码usingSystem;usingSystem.Text;namespaceConsoleTest{internalclassProgram{privatestaticvoidMain(string[]args){stringaaa=…

  • 学会使用getopt函数[通俗易懂]

    学会使用getopt函数[通俗易懂]简介getopt函数是命令行参数解析函数,在平时阅读源码的时候经常遇到,很有必要对其总结一下,做个记录!命令行参数各组成部分的名称先来了解下命令行参数各组成部分的名称。直接上图:非常清楚,命令行参数由Commandname,Option,Optionargument以及Operands组成。Commandname不用多说,就是程序的名称。操作对象Operands又…

  • Rancher首席架构师解读Fleet:它何以管理百万集群?

    Rancher首席架构师解读Fleet:它何以管理百万集群?作者简介DarrenShepherd,RancherLabs联合创始人及首席架构师。在加入Rancher之前,Darren是Citrix的高级首席工程师,他在那里从事CloudStack、OpenStack、Docker的工作,并构建下一代基础设施编排技术。在加入Citrix之前,Darren曾在GoDaddy工作,他设计并领导一个团队实施公有和私有IaaS云。本文转自RancherLabs2020年年初,Rancher开源了海量集群管理项目Fleet,为大量的Kubernetes集群提供集.

  • 【杂谈】您是以什么姿态来参与讨论、回帖的?

    【杂谈】您是以什么姿态来参与讨论、回帖的?

  • JAVA程序员简历模板_Java工程师简历模板

    JAVA程序员简历模板_Java工程师简历模板Java程序员简历模板本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供。(括号里的是我们的顾问编写的说明,建议在简历书写完成后统一删除)先讲讲怎样才是一份好的技术简历首先,一份好的简历不光说明事实,更通过FAB模式来增强其说服力。Feature:是什么Advantage:比别人好在哪些地方Benefit:如果雇佣你,招聘方会得到什么好

    2022年10月30日
  • msys2安装与使用_mingw使用教程

    msys2安装与使用_mingw使用教程一、安装官方下载地址http://www.msys2.org/指定好安装路径(一般D根目录即可),一路下一步就好。二、配置国内镜像、设置窗体修改颜色使用[清华大学开源软件镜像站]中的地址,修

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号