# 可视化的JavaScript —— (二)提升

【二】JavaScript Visualized: Hoisting (opens new window)

提升是每个JS开发人员都听说过的术语之一,因为你在谷歌上搜索令人讨厌的错误,结果在StackOverflow上,这个人告诉你这个错误是由提升引起的,那么,什么是提升?

如果您是JavaScript新手,您可能经历过一些奇怪的行为,其中一些变量随机抛出undefinedReferenceErrors等错误。提升通常被解释为将变量和函数放在文件的顶部,但不是这样的,尽管行为看起来像是这样。

当JS引擎获得我们的脚本时,它所做的第一件事就是为代码中的数据设置内存。此时不会执行任何代码,它只是在为执行做准备。函数声明和变量的存储方式是不同的。函数以对整个函数的引用存储。

gif7

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

gif8

用var关键字声明的变量的默认值是undefined。

gif9

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

由于函数是通过对整个函数代码的引用来存储的,因此我们甚至可以在创建它们的行之前调用它们 gif16

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

gif17

为了防止意外地引用未定义的变量,就像使用var关键字那样,每当我们试图访问未初始化的变量时,都会抛出ReferenceError。在它们实际声明之前的“区域”,被称为暂时性死区:你不能在变量初始化之前引用它们(这也包括ES6类!)

gif18

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

(哦,我注意到这应该是第7个,会尽快更新的)

gif12

done!快速回顾:

  • 在我们执行代码之前,函数和变量被存储在内存中用于执行上下文,这叫做提升。
  • 函数在存储时使用对整个函数的引用,var关键字的变量值为undefined, letconst关键字的变量在存储时未初始化。

【完】

上次更新: 1/8/2023, 9:08:35 AM