[译]JavaScript️可视化:提升

1,436 阅读3分钟

本系列

正文

提升是每个JS开发人员都听说过的那些术语之一,因为您在Google上搜索了令人讨厌的错误并最终到达StackOverflow,此人告诉您此错误是由于提升引起的。🙃那么,提升是什么?(仅供参考- 范围将在另一篇文章中介绍,我希望使文章小而集中)

如果您不熟悉JavaScript,则可能会遇到“怪异”的行为,其中某些变量是随机的undefined,ReferenceErrors会被抛出,依此类推。提升通常被解释为将变量和函数放在文件的顶部,但是,那不是事实,虽然行为看起来像这样

当JS引擎获取我们的脚本时,它要做的第一件事就是为代码中的数据设置内存。在这一点上,没有代码被执行,只是准备好所有要执行的东西。函数声明和变量的存储方式不同。函数以对整个函数的引用存储。

对于变量,则有所不同。ES6引入了两个新的关键字来声明变量:let和const。用letor const关键字声明的变量未初始化存储。

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

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

由于函数是在引用整个函数代码的情况下存储的,因此我们甚至可以在创建它们的行之前调用它们!🔥

当我们引用与声明的变量var的声明之前的关键字,它会简单地返回它存储与它的默认值:undefined!但是,这有时可能会导致“意外”行为。在大多数情况下,这意味着您无意中引用了它(您可能不希望它实际上具有的值undefined)😬

为了防止undefined像使用var关键字那样意外地引用变量,ReferenceError每当我们尝试访问未初始化的变量时,都将引发a 。在它们实际声明之前的“区域”称为时间盲区:在初始化之前,您不能引用变量(也包括ES6类!)。

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

(糟糕,我现在注意到这应该是数字7。将尽快更新)。

全做完了!🎉快速回顾:

在执行代码之前,将函数和变量存储在内存中以用于执行上下文。这称为吊装。 函数存储与将整个函数的参考,与变量var与值的关键字undefined,和变量与let和const关键字地存储未初始化。 我希望提升术语一词的含义不再那么模糊,因为我们已经研究了执行代码时发生的情况。与往常一样,不要担心它是否仍然没有任何意义。您使用它的次数越多,您将对其感到更加自在。随时向我寻求帮助,我很乐意为您服务!😃

原文

个人博客

github.com/abc-club/fr…