【动画演示】:变量提升别有一翻风味

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
作者:Lydia Hallie
译者:前端小智
来源:dev
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

'提升'是 JS 开发都经常接触的一个术语,如果你刚接触 JS,可能会遇到一些奇怪的行为,其中一些变量是随机undefined,会抛出ReferenceErrors 异常等等。提升通常被解释为将变量和函数放到作用域顶部,但实际上并不是这样,尽管行为看起来是这样的。

当 JS 引擎获取我们的代码时,它要做的第一件事就是为代码中的数据设置内存。 目前还没有执行任何代码,只是准备要执行的所有内容。 函数声明和变量的存储方式不同。 函数是以按保存函数的引用的方式来存储。

1.函数是以按保存函数的引用的方式来存储(Functions are stored with a reference to the entire function

图片描述

使用变量,则有所不同。 ES6 引入了两个新的关键字来声明变量:letconst。 用letconst关键字声明的变量保存的状态是 uninitialized

2.用letconst关键字声明的变量保存的状态是 uninitialized

图片描述

使用var关键字声明的变量存储的默认值为undefined

图片描述

现在创建阶段已经完成,我们可以执行代码。让我们看看在声明函数或任何变量之前,如果顶部执行3console.log语句会发生什么。

由于函数存储在对整个函数代码的引用中,所以我们可以在创建它们的行之前调用它们。

4.在执行阶段,我们可以在声明函数之前调用它们,因为我们在内存中引用了整个函数(During the execution phase, we can invoke a function before we declared them, since we a reference to the entire function in memory)

图片描述

当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined。然而,这有时会导致“意料之外”的行为。在大多数情况下,我们有可能会无意中重新引用了它(你可能不希望它的值为undefined)

5. 当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined

图片描述

为了防止意外引用undefined的变量,就像我们可以使用var关键字一样,每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError。在它们实际声明之前的“区域”称为**临时死区**:不能在它们的初始化之前引用变量(这也包括ES6类`)

6.每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError。在它们实际声明之前的“区域”称为临时死区**

图片描述

当引擎通过我们实际声明变量的那一行时,内存中的值会被我们实际声明的值覆盖。

图片描述

总结

希望本文对你有所帮助,感谢阅读。


原文:https://dev.to/lydiahallie/ja...

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug


交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

clipboard.png

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看