动图演示变量提高，通俗易懂！

做者：Ahmad shaded
译者：前端小智
来源：sitepoint

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

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

当 JS 引擎获取咱们的代码时，它要作的第一件事就是为代码中的数据设置内存。 目前尚未执行任何代码，只是准备要执行的全部内容。 函数声明和变量的存储方式不一样。 函数是以按保存函数的引用的方式来存储。

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

使用变量，则有所不一样。 ES6 引入了两个新的关键字来声明变量：let和const。 用let或const关键字声明的变量保存的状态是 uninitialized。

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

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

如今建立阶段已经完成，咱们能够执行代码。让咱们看看在声明函数或任何变量以前，若是顶部执行3个console.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。在它们实际声明以前的“区域”称为临时死区**

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

总结

• 在执行代码以前，函数和变量存储在内存中，用于执行上下文，这就是所谓的提高。
• 函数存储为对整个函数的引用，用var关键字声明的变量默认值为undefined，用let和const关键字声明变量默认存储值为uninitialized。

但愿本文对你有所帮助，感谢阅读。

---

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

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

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。